Storybook MCP

[!TIP] Ce dépôt a été déplacé vers storybookjs/storybook à partir de Storybook v10.6.0. Veuillez consulter cette page pour une documentation mise à jour.

---

Storybook MCP

Bienvenue dans le monorepo de l'addon Storybook MCP ! Ce projet permet aux agents IA de travailler plus efficacement avec Storybook en fournissant un serveur MCP (Model Context Protocol) qui expose les informations sur les composants UI et les flux de développement.

📦 Paquets

Ce monorepo contient quatre paquets principaux :

• @storybook/mcp - Bibliothèque MCP autonome pour servir les connaissances sur les composants Storybook (peut être utilisée indépendamment)
• @storybook/addon-mcp - Addon Storybook qui exécute un serveur MCP dans votre serveur de développement Storybook, et inclut les fonctionnalités de @storybook/mcp depuis votre Storybook local
• @storybook/claude-code-plugin - Plugin Claude Code avec des compétences de configuration Storybook et une configuration MCP
• @storybook/codex-plugin - Plugin Codex avec des compétences de configuration Storybook et une configuration MCP

Chaque paquet possède son propre README avec une documentation destinée aux utilisateurs. Ce document est destiné aux contributeurs qui souhaitent développer, tester ou contribuer à ces paquets.

🚀 Démarrage rapide

Tester les plugins Claude et Codex depuis GitHub

Les testeurs externes peuvent installer la place de marché des plugins directement depuis la branche main de ce dépôt. Aucun clone local n'est requis.

Codex (plus de détails)

codex plugin marketplace add storybookjs/mcp --ref main
codex plugin add storybook@storybook

Vérifiez la place de marché et le plugin :

codex plugin marketplace list
codex plugin list --marketplace storybook

Claude Code (plus de détails)

claude plugin marketplace add storybookjs/mcp@main --scope user
claude plugin install storybook@storybook --scope user

Vérifiez le plugin et le serveur MCP :

claude plugin list --json
claude mcp list

Le dépôt conserve intentionnellement les catalogues de la place de marché à deux endroits. Les catalogues racine prennent en charge les installations GitHub depuis storybookjs/mcp ; les catalogues locaux aux paquets prennent en charge les scripts de développement locaux des paquets. Ils doivent rester identiques, sauf pour le chemin relatif du plugin source, et la validation des paquets vérifie qu'ils le sont.

Prérequis

• Node.js 24+ - Le projet nécessite Node.js 24 ou supérieur (voir .nvmrc)
• pnpm 10.19.0+ - Exigence stricte du gestionnaire de paquets (appliquée dans package.json)

# Use the correct Node version
nvm use

# Install pnpm if you don't have it
npm install -g pnpm@10.19.0

Installation

# Clone the repository
git clone https://github.com/storybookjs/mcp.git
cd addon-mcp

# Install all dependencies (for all packages in the monorepo)
pnpm install

Flux de développement

# Build all packages
pnpm build

# Start development mode (watches for changes in all packages)
pnpm dev

# Run unit tests in watch mode
pnpm test

# Run unit tests once
pnpm test:run

# Run Storybook with the addon for testing
pnpm --filter internal-storybook storybook

La commande Storybook démarre :

• L'instance Storybook de test interne sur http://localhost:6006
• L'addon en mode surveillance, afin que les modifications soient reflétées automatiquement
• Le serveur MCP disponible à http://localhost:6006/mcp

🛠️ Tâches courantes

Développement

La commande turbo watch build exécute tous les paquets en mode surveillance, en reconstruisant automatiquement lorsque vous apportez des modifications :

# Start development mode for all packages
pnpm turbo watch build

# This is usually all you need - starts Storybook AND watches addon for changes
pnpm storybook

Construction

# Build all packages
pnpm build

Tests

Le monorepo utilise une configuration Vitest centralisée au niveau racine avec des projets configurés pour chaque paquet :

# Watch tests across all packages
pnpm test

# Run tests once across all packages
pnpm test:run

# Run tests with coverage and CI reporters
pnpm test:ci

Débogage des serveurs MCP

Utilisez l'inspecteur MCP pour déboguer et tester les fonctionnalités du serveur MCP :

# Launches the MCP inspector (requires Storybook to be running)
pnpm inspect

Cela utilise la configuration dans .mcp.inspect.json pour se connecter à vos serveurs MCP locaux.

Alternativement, vous pouvez également utiliser ces commandes curl pour vérifier que tout fonctionne :

# test that the mcp server is running
# use port 6006 to test the addon-mcp server instead
curl -X POST \
  http://localhost:13316/mcp      \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list",
    "params": {}
  }'

# test a specific tool call
curl -X POST http://localhost:13316/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "list-all-documentation",
      "arguments": {}
    }
  }'

Débogage avec Storybook

Vous pouvez démarrer Storybook avec :

pnpm storybook

Cela construira tout et démarrera Storybook avec addon-mcp, puis vous pourrez connecter votre agent de codage à http://localhost:6006/mcp (ou à votre point de terminaison d'addon configuré) et l'essayer.

Travailler avec l'application MCP

Pour travailler avec et déboguer l'application MCP rendue dans le cadre de l'outil preview-stories, vous pouvez :

1. Utiliser la version Insiders de VSCode
2. Assurez-vous que le paramètre chat.mcp.apps.enabled est activé
3. Démarrez le Storybook du dépôt en mode surveillance en exécutant pnpm storybook à la racine
4. Redémarrez VSCode et ouvrez le fichier .vscode/mcp.json et assurez-vous que Storybook MCP est marqué comme En cours d'exécution, sinon cliquez sur Démarrer.
5. Ouvrez une conversation dans VSCode et écrivez une invite comme celle-ci :

Montrez-moi à quoi ressemblent toutes les histoires de boutons, en utilisant Storybook MCP

6. Après cette première invite, à chaque modification, Storybook redémarre automatiquement. Attendez qu'il soit complètement prêt, puis vous pouvez demander "Réexécutez l'outil".

Vous pouvez également utiliser l'inspecteur de MCPJam pour avoir un contrôle plus précis des appels d'outils.

Formatage et linting

# Format all files with Prettier
pnpm format

# Check formatting without changing files
pnpm format:check

# Lint code with oxlint
pnpm lint

# Lint with GitHub Actions format (for CI)
pnpm lint:ci

# Check package exports with publint
pnpm publint

🔍 Contrôles de qualité

Le monorepo comprend plusieurs contrôles de qualité qui s'exécutent dans CI :

# Run all checks (build, test, lint, format, typecheck, publint)
pnpm check

# Run checks in watch mode (experimental)
pnpm check:watch

# Type checking (uses tsc directly, not turbo)
pnpm typecheck

# Type checking with turbo (for individual packages)
pnpm turbo:typecheck

# Testing with turbo (for individual packages)
pnpm turbo:test

📝 Conventions de code

TypeScript et imports

Incluez toujours les extensions de fichier dans les imports relatifs :

// ✅ Correct
import { foo } from './bar.ts';

// ❌ Wrong
import { foo } from './bar';

• Les imports JSON utilisent la syntaxe des attributs d'import :

import pkg from '../package.json' with { type: 'json' };

🚢 Processus de publication

Ce projet utilise Changesets pour la gestion des versions :

# 1. Create a changeset describing your changes
pnpm changeset

Lorsque vous créez une PR, ajoutez un changeset si vos modifications doivent déclencher une publication :

• Patch : Corrections de bugs, mises à jour de documentation
• Mineur : Nouvelles fonctionnalités, modifications rétrocompatibles
• Majeur : Modifications cassantes

🤝 Contribution

Nous accueillons les contributions ! Voici comment commencer :

1. Forkez le dépôt et créez une branche de fonctionnalité
2. Apportez vos modifications en suivant les conventions de code ci-dessus
3. Testez vos modifications en utilisant l'instance Storybook interne
4. Créez un changeset si vos modifications justifient une publication
5. Soumettez une pull request avec une description claire

Avant de soumettre

• Le code se construit sans erreur (pnpm build)
• Les tests passent (pnpm test:run)
• Le code est formaté (pnpm format)
• Le code est linté (pnpm lint)
• La vérification des types passe (pnpm typecheck)
• Modifications testées avec l'inspecteur MCP ou Storybook interne
• Changeset créé si nécessaire (pnpm changeset)

Obtenir de l'aide

• Idées et demandes de fonctionnalités : Démarrer une discussion
• Rapports de bugs : Ouvrir un problème
• Questions : Posez vos questions dans GitHub Discussions

📄 Licence

MIT - Voir LICENSE pour plus de détails

---

Remarque : Ce projet est expérimental et en cours de développement actif. Les API et l'architecture peuvent changer à mesure que nous explorons les meilleures façons d'intégrer les agents IA avec Storybook.