• VISUEL
  • RECHERCHE
  • VÉRIFICATION
  • HUMAIN

Prévisualiser vos composants Storybook avec votre IA

Connectez Storybook à votre client IA une seule fois. Ensuite, demandez simplement des aperçus en direct de vos composants au cœur de votre conversation.

Demandez à l'IA à propos de cette page

Réponse rapide

Comment voir mes composants Storybook dans mon chat IA ?

Votre IA utilise le MCP Storybook pour identifier des composants spécifiques et générer des URLs d'iframe uniques. Vous obtenez un lien direct vers un environnement sandbox où le composant s'affiche de manière isolée. Cela vous permet de vérifier instantanément les changements visuels ou comportementaux après avoir demandé une modification de code.

Les résultats

Ce que cette connexion vous apporte

L'IA gère la recherche technique et la génération d'URL, vous laissant vous concentrer sur l'interface.

VISUEL

Aperçus instantanés

L'IA trouve le bon composant et fournit une URL. Cliquez dessus pour voir le rendu dans une iframe isolée.

RECHERCHE

Découverte de composants

Si vous ne connaissez pas le nom exact, votre IA parcourt votre bibliothèque Storybook pour trouver la correspondance.

VÉRIFICATION

Retour visuel rapide

Une fois que l'IA a modifié le code, générez une nouvelle URL d'aperçu pour valider immédiatement la correction.

HUMAIN

Édition de code manuelle

L'IA ne peut pas réécrire vos fichiers locaux ni effectuer de commits. Vous gardez la main sur l'enregistrement des fichiers et le workflow git.

Le flux

Ce que fait votre IA lors d'une demande d'aperçu

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

  1. Localiser le composant

    L'IA scanne votre bibliothèque Storybook pour identifier le composant spécifique que vous souhaitez visualiser.

    search_components

  2. Générer le lien sandbox

    Une fois trouvé, l'IA crée une URL directe pointant vers une iframe isolée de ce composant.

    get_preview_url

  3. Livrer l'URL

    L'IA affiche le lien cliquable dans votre fenêtre de chat pour un accès immédiat.

    get_preview_url

  4. Valider les changements

    Après une modification visuelle, l'IA relance la recherche et la génération pour afficher l'état mis à jour.

    search_componentsget_preview_url

Essayez

Copiez ces exemples pour commencer.

Utilisez ces prompts pour activer les outils Storybook.

Points de départ

Ce sont des requêtes de base. Remplacez les noms de composants par ceux de votre propre projet.

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 donne-moi une URL d'aperçu.

  • Cherche tous les composants liés à 'Navigation' et montre-moi leurs liens d'aperçu.

  • J'ai besoin de voir le composant Modal dans un sandbox isolé. Peux-tu me donner l'URL ?

  • Montre-moi l'aperçu du composant PrimaryButton pour que je puisse vérifier le padding.

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

Commencez ici

Connectez Storybook une fois, puis demandez.

Liez simplement votre instance Storybook à Vinkius. Vos identifiants restent chiffrés et vous pourrez prévisualiser vos composants sur n'importe quel client compatible MCP.

Connecter Storybook à votre IA

FAQ

Fonctionnement de l'aperçu Storybook

  • 01

    L'IA peut-elle modifier directement le code de mon composant ?

    Non. L'IA peut uniquement trouver des composants et générer des URLs d'aperçu. Vous devez appliquer les changements de code dans votre propre éditeur.

  • 02

    L'IA a-t-elle besoin de mes identifiants Storybook ?

    Non. Vous connectez le MCP via Vinkius, qui gère la connexion de manière sécurisée. Votre client IA n'a pas besoin de vos accès.

  • 03

    L'IA peut-elle créer de nouvelles stories pour moi ?

    Non. Les outils permettent uniquement à l'IA de chercher des composants existants et d'obtenir les URLs des stories déjà présentes.

  • 04

    L'aperçu affichera-t-il mes variables d'environnement locales ?

    L'URL d'aperçu pointe vers votre instance Storybook. Le rendu dépendra de la configuration de votre Storybook concernant la gestion des données.

  • 05

    Puis-je utiliser cela avec Cursor ?

    Oui. Tout client compatible MCP comme Cursor, Claude ou Windsurf peut l'utiliser une fois la connexion établie.

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

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