• REDUNDANCE
  • DÉCOUVERTE
  • STRUCTURE
  • HUMAIN

Trouver vos composants UI avec votre IA via Storybook

Connectez Storybook à votre client IA une seule fois. Ensuite, interrogez l'intégralité de votre système de design en langage naturel.

Demandez à l'IA à propos de cette page

Réponse rapide

Comment trouver mes composants UI avec mon IA ?

Votre IA utilise le MCP Storybook pour scanner votre bibliothèque et vos catégories de composants. Elle identifie les correspondances selon votre description pour vous éviter de recréer ce qui existe déjà.

Ce que vos recherches vous apportent

Les bénéfices de ces recherches

L'IA transforme votre système de design en une base de connaissances consultable.

REDUNDANCE

Zéro code en doublon

L'IA repère les composants existants qui répondent à vos besoins. Vous évitez d'écrire du CSS ou de la logique pour des éléments déjà présents dans la bibliothèque.

DÉCOUVERTE

Recherche instantanée

Au lieu de naviguer manuellement dans les dossiers, demandez simplement ce dont vous avez besoin. L'IA trouve le bon composant en quelques secondes.

STRUCTURE

Vue organisée du système

L'IA cartographie vos catégories de composants. Cela vous aide à comprendre l'organisation de votre système de design sans navigation fastidieuse.

HUMAIN

Validation finale

L'IA suggère le meilleur composant à utiliser. Il vous appartient ensuite de décider s'il correspond parfaitement au pattern UI que vous développez.

Le flux

Ce que fait l'IA lors de votre requête.

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

  1. Cartographier le système

    L'IA analyse le regroupement de vos composants pour comprendre la structure de la bibliothèque.

    list_categories

  2. Lister les éléments

    Elle extrait la liste complète des composants d'une catégorie spécifique pour voir ce qui est disponible.

    list_components

  3. Recherche ciblée

    Lorsque vous décrivez un élément UI, l'IA cherche la correspondance la plus proche dans la bibliothèque.

    search_components

  4. Vérifier la correspondance

    L'IA compare vos besoins aux propriétés du composant pour garantir qu'il s'agit du bon choix.

    search_components

Essayez

Copiez ces exemples pour commencer.

Utilisez ces prompts pour interagir avec votre système de design.

Points de départ

Remplacez les noms de composants ou de catégories par ceux de votre propre configuration 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 tous les composants de type bouton dans mon Storybook.

  • Cherche les composants d'input qui gèrent la saisie de texte.

  • Liste toutes les catégories disponibles dans mon système de design.

  • J'ai besoin d'un composant card pour un profil utilisateur ; qu'est-ce qu'on a dans Storybook ?

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

Commencez ici

Connectez Storybook une fois, puis interrogez.

Liez simplement votre instance Storybook à Vinkius. Vos identifiants restent chiffrés et vous pouvez immédiatement poser des questions sur vos composants à votre IA.

Connecter Storybook à votre IA

FAQ

Fonctionnement de la tâche.

  • 01

    L'IA peut-elle modifier le code de mes composants ?

    Non. L'IA peut uniquement lire et rechercher vos données Storybook. Elle ne peut pas modifier votre code source ni vos fichiers.

  • 02

    L'IA voit-elle la logique privée de mes composants ?

    L'IA ne voit que les métadonnées et la structure des composants exposées via Storybook. Elle n'a pas accès à l'intégralité de votre système de fichiers local.

  • 03

    Peut-elle créer de nouveaux composants pour moi ?

    Non. Les outils permettent uniquement à l'IA de lister, catégoriser et rechercher les composants existants.

  • 04

    Comment sait-elle quels composants existent ?

    Elle utilise les outils de recherche et de listage pour extraire le registre actuel des composants directement depuis votre instance Storybook.

  • 05

    Est-ce que cela fonctionne avec n'importe quelle configuration Storybook ?

    Oui, tant que l'instance Storybook est accessible via la connexion que vous avez établie avec Vinkius.

  • D'autres questions sur Storybook ? La page du connecteur y répond. Voir toutes les capacités du connecteur Storybook

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