Storybook MCP

L'addon Storybook MCP fait tourner un serveur MCP dans votre serveur de dev Storybook : Claude peut consulter les composants documentés et leurs props, écrire et prévisualiser des stories, et lancer des tests de composants sur son propre travail. Il est encore en preview, et les outils de doc nécessitent un manifeste de composants, que les setups React et les builds Vite pour Angular et Vue savent générer.

Pour qui

• Équipes front-end avec une bibliothèque de composants
• Mainteneurs de design system
• Développeurs qui veulent que le code UI écrit par l'IA réutilise les composants existants

Prompts à essayer

Une fois connecté, demandez avec vos mots. Votre outil d'IA décide quand utiliser le serveur et vous demande votre accord avant de modifier quoi que ce soit d'important.

Liste tous les composants documentés dans notre Storybook et dis-moi lesquels n'ont pas de stories.

Construis une carte de tarif uniquement avec des composants documentés dans Storybook, puis écris-lui une story.

Lance les tests Storybook du composant Button et corrige les échecs.

Comment le connecter dans votre outil d'IA

MCP est un standard ouvert, ce serveur fonctionne donc dans Claude, ChatGPT, Codex, Cursor, VS Code et plus. Choisissez votre outil :

Connecte pour moi le serveur MCP Storybook MCP à Claude Code : exécute cette commande : claude mcp add --transport http storybook http://localhost:6006/mcp
Si une valeur commence par YOUR_, demande-la-moi d'abord. Une fois connecté, aide-moi à me connecter si besoin et montre-moi une chose que je peux lui demander.

Comment nous l'avons vérifié

Vérifié la doc MCP de Storybook (marquée preview), le dossier de l'addon dans le dépôt storybookjs/storybook (dernier commit le 2026-10-14, l'ancien dépôt storybookjs/mcp est archivé et renvoie vers lui) et le package npm @storybook/addon-mcp (10.6.2, environ 2.5 millions de téléchargements par semaine).

Source : storybook.js.org/docs/ai/mcp/overview