Storybook MCP Server einrichten

Der Storybook MCP Server läuft als Addon innerhalb eines bestehenden Storybook-Projekts. Diese Anleitung führt von der Installation bis zur ersten Verbindung mit einem KI-Client.

Voraussetzungen

Du brauchst ein bereits eingerichtetes Storybook-Projekt. Für den vollen Funktionsumfang inklusive Component Manifest ist Storybook 10.3 oder neuer mit einem React-Framework beziehungsweise @storybook/angular-vite oder @storybook/vue3-vite nötig; mit älteren Setups funktionieren Development- und Testing-Werkzeuge laut Anbieter weiterhin, nur ohne die vollständige Manifest-Tiefe.

Installation

Führe im Projektverzeichnis den offiziellen Storybook-Installationsbefehl aus:

npx storybook add @storybook/addon-mcp

Der Befehl installiert das Paket und trägt es automatisch in die Storybook-Konfiguration ein.

Component Manifest aktivieren

Öffne .storybook/main.ts und aktiviere das Feature-Flag:

export default {
  features: {
    componentsManifest: true,
  },
};

Das Manifest ist die strukturierte Grundlage, über die der Agent Komponenten, Stories und Props findet, ohne den gesamten Quellcode durchsuchen zu müssen.

Storybook starten und MCP-Server verbinden

Starte den gewohnten Storybook-Entwicklungsserver, zum Beispiel mit npm run storybook. Der MCP-Server ist danach standardmäßig unter http://localhost:6006/mcp erreichbar. Zur Verbindung mit einem Client bietet Storybook einen Helfer-Befehl an:

npx mcp-add --type http --url "http://localhost:6006/mcp"

Der Befehl trägt die passende Konfiguration automatisch beim gewählten Client ein. Alternativ lässt sich die URL manuell in der jeweiligen MCP-Client-Konfiguration hinterlegen, etwa in Claude Code, Cursor, Codex, Gemini CLI oder VS Code Copilot.

Erste Schritte mit dem Agenten

Nach der Verbindung kann ein Agent zum Beispiel per list-all-documentation einen Überblick über alle dokumentierten Komponenten abrufen oder mit get-story Code und Metadaten einer einzelnen Story einsehen. Mit preview-stories lässt sich eine oder mehrere Stories direkt als interaktive Vorschau im Chat-Fenster öffnen – nützlich, um visuelles Feedback zu bekommen, ohne manuell in den Browser zu wechseln. Für neue Komponenten lohnt es sich, den Agenten zunächst bestehende Stories per Development-Werkzeugen finden zu lassen, statt Varianten doppelt anzulegen. Das spart nicht nur Zeit, sondern hält die Komponentenbibliothek insgesamt konsistenter, weil weniger nahezu identische Varianten nebeneinander entstehen.

Tests ausführen und automatisch beheben lassen

Die Testing-Werkzeuge führen Interaktions- und Accessibility-Tests für ausgewählte Stories aus und liefern strukturierte Ergebnisse zurück. Bittest du den Agenten explizit, fehlgeschlagene Tests zu beheben, kann er Code ändern und die Tests erneut ausführen, bis sie bestehen – die im Projekt beschriebene "Self-Healing-Schleife".

Typische Stolperfallen

Bleibt das Component Manifest deaktiviert, findet der Agent Komponenten nur eingeschränkt und muss stärker auf reines Quellcode-Lesen zurückgreifen. Läuft kein Storybook-Dev-Server, ist unter localhost:6006/mcp nichts erreichbar – der Server existiert nur, solange der Dev-Server aktiv ist. Bei älteren Angular-Projekten ohne @storybook/angular-vite funktioniert zwar die Grundintegration, aber ohne die volle Manifest-Tiefe; in dem Fall hilft ein Blick in die offizielle Frameworks-Kompatibilitätsliste. Da der Server ohne eigene Authentifizierung läuft, sollte der Dev-Server-Port nicht ungeschützt nach außen weitergeleitet werden.