Storybook MCP Server

Der Storybook MCP Server ist ein offizielles Addon des Storybook-Projekts, das von der Firma Chromatic gepflegt wird. Er verbindet den lokalen Storybook-Entwicklungsserver über das Model Context Protocol mit KI-Coding-Agenten und gibt ihnen damit direkten Zugriff auf die bestehende Komponentenbibliothek eines Projekts – Stories, Props-Dokumentation, Varianten und Tests –, statt dass ein Agent Komponenten allein aus dem Quellcode erraten muss. Laut Projektbeschreibung entsteht dadurch eine "Self-Healing-Schleife": Ein Agent kann neu erzeugte oder veränderte UI direkt validieren, gefundene Fehler eigenständig beheben und die Tests erneut ausführen, bevor er dem Menschen das Ergebnis präsentiert.

Die drei Werkzeuggruppen

Das Addon gliedert seine MCP-Tools laut offizieller Dokumentation in drei Kategorien. Die Development-Werkzeuge erlauben das Auffinden und Verfassen von Stories sowie das Abbilden bestehender Komponenten auf ihre Varianten. Die Docs-Werkzeuge liefern Komponenten-Dokumentation und Props-Referenzen, etwa über list-all-documentation für eine vollständige Übersicht oder get-story für Code und Metadaten einer einzelnen Story. Die Testing-Werkzeuge führen automatisierte Interaktions- und Accessibility-Prüfungen aus und liefern strukturierte Ergebnisse zurück, auf deren Basis ein Agent gezielt nachbessern kann. Zusätzlich lassen sich mit preview-stories einzelne oder mehrere Stories als interaktive Vorschau direkt im Chat-Fenster des jeweiligen Clients öffnen, sodass sichtbares Feedback entsteht, ohne dass ein Mensch manuell in den Browser wechseln muss.

Component Manifest und Framework-Unterstützung

Kernstück der Integration ist das sogenannte Component Manifest, ein strukturierter Index aller Komponenten, Stories und Props eines Projekts. Es lässt sich über die Konfigurationsoption features: { componentsManifest: true } in der Datei .storybook/main.ts aktivieren. Volle Manifest-Unterstützung bietet Storybook laut Dokumentation aktuell für React-basierte Frameworks sowie für @storybook/angular-vite und @storybook/vue3-vite; der ursprüngliche Ankündigungs-Blogpost nennt als Ausgangspunkt konkret React-Projekte ab Storybook 10.3 und kündigt Unterstützung für weitere Frameworks im Laufe des Jahres an. Für ältere Angular-Setups und andere, noch nicht vollständig abgedeckte Frameworks funktionieren die Development- und Testing-Werkzeuge laut Anbieter weiterhin, allerdings ohne die vollständige Manifest-Tiefe.

Installation und Verbindung mit Agenten

Die Einrichtung erfolgt über den offiziellen Storybook-Installationsbefehl npx storybook add @storybook/addon-mcp, der das Paket zum Projekt hinzufügt und in die Storybook-Konfiguration einträgt. Läuft der lokale Storybook-Entwicklungsserver, ist der MCP-Server standardmäßig unter http://localhost:6006/mcp erreichbar. Zur Verbindung mit einem unterstützten Client bietet Storybook zusätzlich den Befehl npx mcp-add --type http --url "http://localhost:6006/mcp" an, der die passende Client-Konfiguration automatisch einträgt. Laut Anbieter funktioniert der Server unter anderem mit Claude Code, OpenAI Codex, Cursor, Google Gemini CLI und VS Code Copilot sowie grundsätzlich jedem weiteren MCP-fähigen Client.

Abgrenzung zu anderen Werkzeugen im Katalog

Anders als generische Browser-Automatisierungswerkzeuge wie Playwright oder Chrome DevTools, die eine Webseite von außen steuern und beobachten, kennt der Storybook MCP Server die Struktur der Komponentenbibliothek selbst: Er weiß, welche Varianten einer Komponente bereits als Story existieren, welche Props sie erwartet und welche Interaktions- oder Accessibility-Tests dafür definiert sind. Das macht ihn zu einem spezialisierten Werkzeug für Frontend-Teams, die bewusst mit Storybook als Komponenten-Werkstatt arbeiten, statt zu einer allgemeinen Browser-Steuerung.

Kosten

Das Addon selbst ist Teil des MIT-lizenzierten Storybook-Kernprojekts und vollständig kostenlos nutzbar, ohne Konto oder Abonnement. Chromatic als Betreiber von Storybook bietet separat eigene, teils kostenpflichtige Cloud-Dienste rund um visuelles Testen und Publishing an; diese stehen in keinem notwendigen Zusammenhang mit der lokalen Nutzung des MCP-Addons.

Für wen sich der Storybook MCP Server lohnt

Der Server eignet sich für Teams, die bereits mit Storybook arbeiten und KI-Agenten beim Bau, der Pflege und dem Testen von UI-Komponenten enger an die bestehende Designsprache und Testabdeckung binden wollen – etwa um neue Stories für frisch gebaute Komponenten automatisch erzeugen, bestehende Varianten wiederverwenden statt duplizieren und fehlgeschlagene Interaktions- oder Accessibility-Tests direkt vom Agenten beheben zu lassen. Wer keine Storybook-Instanz betreibt oder ausschließlich fertige Webseiten im Browser automatisieren möchte, findet im Katalog mit Playwright und Chrome DevTools passendere, allgemeinere Alternativen.

Ein bestehendes Storybook-Projekt, für vollen Funktionsumfang (Component Manifest) Storybook 10.3 oder neuer mit einem React-Framework beziehungsweise @storybook/angular-vite oder @storybook/vue3-vite; ein MCP-fähiger Client (z. B. Claude Code, Codex, Cursor, Gemini CLI, VS Code Copilot).

Im Projektverzeichnis npx storybook add @storybook/addon-mcp ausführen, danach in .storybook/main.ts features: { componentsManifest: true } setzen. Storybook-Dev-Server starten, dann per npx mcp-add --type http --url "http://localhost:6006/mcp" mit dem gewünschten Client verbinden oder die URL manuell in der Client-Konfiguration eintragen.

npx storybook add @storybook/addon-mcp

Keine eingebaute Authentifizierung; der MCP-Server läuft als Teil des lokalen Storybook-Entwicklungsservers unter localhost:6006/mcp und ist standardmäßig nur auf dem eigenen Rechner erreichbar.

Der Server benötigt Lesezugriff auf den Storybook-Quellcode des Projekts (Stories, Komponenten, Konfiguration) sowie die Fähigkeit, den eingebauten Test-Runner für Interaktions- und Accessibility-Tests lokal auszuführen. Keine Berechtigungen außerhalb des Projektverzeichnisses und des laufenden Dev-Servers.

Komponenten-Quellcode, Story-Definitionen, Props-Dokumentation sowie Test- und Vorschau-Ergebnisse werden an den verbundenen KI-Agenten und dessen Modell-Provider übertragen. Da alles lokal im Entwicklungsserver läuft, verlassen Daten das Projekt nur über diesen Weg an das Modell, nicht an Chromatic oder Storybook selbst.

Da der MCP-Server ohne eigene Authentifizierung läuft, sollte der Storybook-Dev-Server-Port (Standard 6006) nicht ungeschützt in ein öffentliches Netzwerk weitergeleitet werden, da sonst Dritte im selben Netzwerk auf Komponenten-Quellcode und Testergebnisse zugreifen könnten. Enthalten Stories reale Beispieldaten statt Platzhaltern, gelangen diese über den Agenten an dessen Modell-Provider; für sensible Projekte empfiehlt sich die Nutzung ausschließlich anonymisierter Beispieldaten in Stories.