Storybook MCP

[!TIP] Dieses Repository wurde zu storybookjs/storybook ab Storybook v10.6.0 verschoben. Aktualisierte Dokumentation finden Sie dort.

---

Storybook MCP

Willkommen im Storybook MCP Addon-Monorepo! Dieses Projekt ermöglicht es KI-Agenten, effizienter mit Storybook zu arbeiten, indem es einen MCP-Server (Model Context Protocol) bereitstellt, der UI-Komponenteninformationen und Entwicklungsworkflows bereitstellt.

📦 Pakete

Dieses Monorepo enthält vier Hauptpakete:

• @storybook/mcp - Eigenständige MCP-Bibliothek zum Bereitstellen von Storybook-Komponentenwissen (kann unabhängig verwendet werden)
• @storybook/addon-mcp - Storybook-Addon, das einen MCP-Server in Ihrem Storybook-Entwicklungsserver ausführt und die Funktionalität von @storybook/mcp aus Ihrem lokalen Storybook enthält
• @storybook/claude-code-plugin - Claude-Code-Plugin mit Storybook-Einrichtungsfähigkeiten und MCP-Konfiguration
• @storybook/codex-plugin - Codex-Plugin mit Storybook-Einrichtungsfähigkeiten und MCP-Konfiguration

Jedes Paket hat seine eigene README mit benutzerorientierter Dokumentation. Dieses Dokument richtet sich an Mitwirkende, die diese Pakete entwickeln, testen oder dazu beitragen möchten.

🚀 Schnellstart

Testen der Claude- und Codex-Plugins von GitHub

Externe Tester können den Plugin-Marketplace direkt aus dem main-Zweig dieses Repositorys installieren. Kein lokaler Klon ist erforderlich.

Codex (weitere Details)

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

Überprüfen Sie den Marketplace und das Plugin:

codex plugin marketplace list
codex plugin list --marketplace storybook

Claude Code (weitere Details)

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

Überprüfen Sie das Plugin und den MCP-Server:

claude plugin list --json
claude mcp list

Das Repository hält Marketplace-Kataloge absichtlich an zwei Orten. Die Root-Kataloge unterstützen GitHub-Installationen von storybookjs/mcp; die paketlokalen Kataloge unterstützen lokale Paketentwicklungsskripte. Sie sollten identisch bleiben, außer im relativen Plugin-Quellpfad, und die Paketvalidierung prüft dies.

Voraussetzungen

• Node.js 24+ - Das Projekt erfordert Node.js 24 oder höher (siehe .nvmrc)
• pnpm 10.19.0+ - Strikte Paketmanager-Anforderung (durchgesetzt in 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

Entwicklungsworkflow

# 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

Der Storybook-Befehl startet:

• Die interne Test-Storybook-Instanz auf http://localhost:6006
• Das Addon im Watch-Modus, sodass Änderungen automatisch übernommen werden
• MCP-Server verfügbar unter http://localhost:6006/mcp

🛠️ Häufige Aufgaben

Entwicklung

Der turbo watch build-Befehl führt alle Pakete im Watch-Modus aus und baut sie automatisch neu, wenn Sie Änderungen vornehmen:

# 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

Erstellen

# Build all packages
pnpm build

Testen

Das Monorepo verwendet eine zentrale Vitest-Konfiguration auf Root-Ebene mit Projekten, die für jedes Paket konfiguriert sind:

# 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

Debuggen von MCP-Servern

Verwenden Sie den MCP Inspector, um die MCP-Serverfunktionalität zu debuggen und zu testen:

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

Dies verwendet die Konfiguration in .mcp.inspect.json, um eine Verbindung zu Ihren lokalen MCP-Servern herzustellen.

Alternativ können Sie auch diese curl-Befehle verwenden, um zu überprüfen, dass alles funktioniert:

# 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": {}
    }
  }'

Debuggen mit Storybook

Sie können Storybook starten mit:

pnpm storybook

Dies erstellt alles und startet Storybook mit addon-mcp, und Sie können dann Ihren Codierungsagenten unter http://localhost:6006/mcp (oder Ihrem konfigurierten Addon-Endpunkt) verbinden und es ausprobieren.

Arbeiten mit der MCP-App

Um mit der MCP-App zu arbeiten und sie zu debuggen, die als Teil des Vorschau-Storys-Tools gerendert wird, können Sie:

1. Den Insiders-Build von VSCode verwenden
2. Sicherstellen, dass die chat.mcp.apps.enabled-Einstellung aktiviert ist
3. Das Storybook des Repositorys im Watch-Modus starten, indem Sie pnpm storybook im Root ausführen
4. VSCode neu starten und die .vscode/mcp.json-Datei öffnen und sicherstellen, dass Storybook MCP als "Running" markiert ist, andernfalls auf "Start" klicken.
5. Einen Chat in VSCode öffnen und einen Prompt wie diesen schreiben:

Zeigen Sie mir, wie alle Button-Storys aussehen, mit dem Storybook MCP

6. Nach diesem ersten Prompt startet Storybook bei jeder Änderung automatisch neu. Warten Sie, bis es vollständig bereit ist, und geben Sie dann den Prompt "Run the tool again" ein.

Sie können auch den Inspector von MCPJam verwenden, um eine niedrigere Kontrolle über die Tool-Aufrufe zu haben.

Formatierung & 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

🔍 Qualitätsprüfungen

Das Monorepo enthält mehrere Qualitätsprüfungen, die in CI ausgeführt werden:

# 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

📝 Code-Konventionen

TypeScript & Imports

Immer Dateierweiterungen in relativen Imports einschließen:

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

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

• JSON-Imports verwenden die Import-Attribut-Syntax:

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

🚢 Release-Prozess

Dieses Projekt verwendet Changesets für die Versionsverwaltung:

# 1. Create a changeset describing your changes
pnpm changeset

Wenn Sie einen PR erstellen, fügen Sie ein Changeset hinzu, wenn Ihre Änderungen ein Release auslösen sollten:

• Patch: Fehlerbehebungen, Dokumentationsupdates
• Minor: Neue Funktionen, abwärtskompatible Änderungen
• Major: Bahnbrechende Änderungen

🤝 Mitwirken

Wir begrüßen Beiträge! So starten Sie:

1. Repository forken und einen Feature-Zweig erstellen
2. Ihre Änderungen vornehmen gemäß den obigen Code-Konventionen
3. Ihre Änderungen testen mit der internen Storybook-Instanz
4. Ein Changeset erstellen, wenn Ihre Änderungen ein Release rechtfertigen
5. Einen Pull-Request einreichen mit einer klaren Beschreibung

Vor dem Einreichen

• Code baut ohne Fehler (pnpm build)
• Tests bestehen (pnpm test:run)
• Code ist formatiert (pnpm format)
• Code ist gelintet (pnpm lint)
• Typprüfung besteht (pnpm typecheck)
• Änderungen mit MCP Inspector oder internem Storybook getestet
• Changeset erstellt, falls erforderlich (pnpm changeset)

Hilfe erhalten

• Ideen & Feature-Anfragen: Eine Diskussion starten
• Fehlerberichte: Ein Issue öffnen
• Fragen: Fragen Sie in GitHub Discussions

📄 Lizenz

MIT - Siehe LICENSE für Details

---

Hinweis: Dieses Projekt ist experimentell und wird aktiv weiterentwickelt. APIs und Architektur können sich ändern, während wir die besten Wege erkunden, KI-Agenten in Storybook zu integrieren.