• PRÉCISION
  • VITESSE
  • CONFORMITÉ
  • HUMAIN

Vérifier les props et types de composants avec votre IA

Connectez Storybook à votre client IA une seule fois. Ensuite, votre agent pourra lire directement la documentation de vos composants.

Demandez à l'IA à propos de cette page

Réponse rapide

Comment vérifier les props et types de composants avec l'IA ?

Votre IA interroge votre bibliothèque Storybook pour extraire les signatures d'arguments et les valeurs par défaut. Vous obtenez ainsi les données exactes pour une implémentation de code précise. Vous accédez aux types de props et aux états par défaut de chaque composant.

Les résultats

Ce que vous apporte cette connexion

L'IA utilise vos données Storybook pour produire ces résultats.

PRÉCISION

Signatures de props exactes

L'IA récupère les noms et types d'arguments définis dans vos stories. Plus besoin de deviner quels props un composant accepte.

VITESSE

Valeurs par défaut instantanées

Votre agent trouve les valeurs par défaut de chaque argument. Vous pouvez ainsi écrire du code prêt à l'emploi dès le premier essai.

CONFORMITÉ

Alignement avec la bibliothèque

L'IA garantit que votre code correspond à l'implémentation réelle de votre bibliothèque. Cela évite tout décalage entre votre UI et votre code.

HUMAIN

Revue de code manuelle

L'IA fournit les données, mais vous décidez comment intégrer ces composants dans votre logique applicative. Vous restez l'architecte.

Le flux

Ce que fait votre IA lors de la requête.

L'IA sert de pont entre votre interface de chat et vos fichiers Storybook.

  1. Localiser les composants

    Votre agent parcourt votre bibliothèque existante pour trouver le composant spécifique que vous souhaitez utiliser.

    search_components

  2. Extraire les arguments

    Une fois trouvé, l'IA extrait la liste complète des arguments et leurs configurations actuelles.

    get_story_args

  3. Valider les types

    L'IA vérifie les données récupérées par rapport à vos besoins pour garantir la sécurité des types.

    get_story_args

  4. Générer le code

    L'agent utilise les signatures vérifiées pour rédiger le code d'implémentation pour vous.

    get_story_argssearch_components

Essayez

Copiez ces exemples pour commencer.

Utilisez ces prompts pour interagir avec votre bibliothèque.

Points de départ

Remplacez les noms de composants par les noms réels de votre bibliothèque Storybook.

Storybook Connector

Tout est prêt. Choisissez votre client MCP et suivez les instructions de configuration.

Lien du connecteurhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Suivez les étapes ci-dessous pour vous connecter en quelques secondes.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Storybook capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopier
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
Copiez dans le chat04

  • Trouve le composant Button dans Storybook et montre-moi tous ses props disponibles.

  • Quelles sont les valeurs par défaut des arguments du composant PrimaryButton ?

  • Cherche le composant Card et donne-moi la signature TypeScript exacte de ses props.

  • Écris le code React pour implémenter le composant Input en utilisant ses arguments Storybook par défaut.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Commencez ici

Connectez Storybook une fois, puis posez vos questions.

Suivez le lien pour connecter votre bibliothèque. Vos identifiants restent chiffrés et vous pouvez immédiatement interroger vos composants.

Connecter Storybook à votre IA

FAQ

Fonctionnement de la tâche

  • 01

    L'IA peut-elle modifier mes fichiers Storybook ?

    Non. L'IA lit uniquement les données de vos stories pour fournir des informations. Elle ne peut pas modifier vos fichiers.

  • 02

    L'IA connaît-elle les composants absents de Storybook ?

    Non. L'IA n'a accès qu'aux composants qu'elle peut trouver via l'outil de recherche dans votre bibliothèque.

  • 03

    Puis-je utiliser cela avec n'importe quel client IA ?

    Oui, à condition que le client soit compatible MCP, comme Claude, Cursor ou Windsurf.

  • 04

    L'IA va-t-elle écrire le code du composant à ma place ?

    L'IA génère du code basé sur les signatures de props trouvées, mais il vous appartient d'intégrer ce code dans votre projet.

  • 05

    Comment l'IA trouve-t-elle mes composants ?

    Elle utilise l'outil de recherche pour scanner votre bibliothèque Storybook à la recherche de noms et de signatures correspondants.

  • D'autres questions sur Storybook ? Voir toutes les capacités du connecteur Storybook

Connectez Storybook à Claude, Cursor, ChatGPT et d'autres