Storybook

Storybook MCP est le serveur MCP officiel de Storybook, l’atelier open source de développement de composants d’interface. Fourni par l’addon @storybook/addon-mcp, il tourne dans le serveur de développement de Storybook et permet à votre agent IA de réutiliser vos composants documentés, d’écrire des stories et de lancer les tests.

Fonctionnalités principales

• Lister vos composants documentés et afficher leurs props et exemples (docs-list, docs-show, docs-show-story)
• Obtenir les consignes pour écrire des stories et des tests d’interaction (get-storybook-story-instructions)
• Prévisualiser des stories dans le chat ou via des liens vers Storybook (stories-preview)
• Retrouver les stories liées à un composant ou touchées par vos modifications (stories-find-by-component, stories-changed)
• Lancer les tests de composants, contrôles d’accessibilité compris s’ils sont configurés (test-run)

Installation

Installez l’addon, puis déclarez le serveur, disponible par défaut sur http://localhost:6006/mcp, auprès de votre agent :

npx storybook add @storybook/addon-mcp
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project

Bon à savoir

• Les fonctions IA de Storybook sont en préversion : l’API peut encore évoluer
• Storybook doit être lancé, car le serveur MCP fait partie de son serveur de développement
• Les outils docs exigent le manifeste de composants (features.componentsManifest), généré par les frameworks React, @storybook/angular-vite et @storybook/vue3-vite
• Les outils de test nécessitent Storybook Test
• Si l’agent passe par un autre nom d’hôte que localhost, ajoutez-le dans core.allowedHosts

Source : documentation officielle de Storybook, consultée le 30 octobre 2026.