# Storybook MCP

Storybook MCP ist ein offizieller Model Context Protocol (MCP) Server, der KI-Agenten mit Ihrem Storybook verbindet. Er stellt maschinenlesbare Komponenten-Metadaten, Stories, Props und Dokumentation bereit, damit Agenten UI-Komponenten intelligent wiederverwenden und sich mithilfe von Tests selbst korrigieren können.

Canonical URL: https://a2a-mcp.org/entry/storybook-mcp-de

Language: de

Category: MCP Servers

Updated: 2026-04-09

## Übersicht

Storybook MCP ist die offizielle Integration des Storybook-Teams, die die Leistungsfähigkeit des [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) in die komponentenbasierte UI-Entwicklung bringt. Es verwandelt Ihr bestehendes Storybook in eine reichhaltige, strukturierte Datenquelle, die KI-Agenten in Echtzeit abfragen können.

Durch die Bereitstellung von Komponenten-Metadaten, Stories, Property-Typen, Verwendungsbeispielen und Dokumentation in einem optimierten, token-effizienten Format ermöglicht Storybook MCP KI-Agenten, Benutzeroberflächen zu erstellen, die mit dem Designsystem Ihres Teams übereinstimmen, anstatt generischen oder inkonsistenten Code zu generieren.

## Hauptmerkmale

- **Komponentenerkennung & Kontext**: Agenten können Komponenten auflisten, detaillierte Properties, Stories, Controls und Dokumentation abrufen.
- **Optimierte Manifeste**: Liefert kuratierte, maschinenlesbare Datenpakete (Component Manifest) mit APIs, Varianten, Design-Tokens und Verwendungsausschnitten – deutlich effizienter als roher Quellcode.
- **Story-Erstellung & Tests**: Agenten können neue Stories für Komponenten schreiben und Tests autonom ausführen, mit integrierten Feedback-Schleifen zur Selbstkorrektur.
- **Nahtlose Integration**: Installation über das Paket `@storybook/addon-mcp`; der MCP-Server läuft neben Ihrem Storybook-Dev-Server (typischerweise unter dem Endpunkt `/mcp`).
- **Standalone-Bibliothek**: Verwenden Sie `@storybook/mcp` unabhängig für individuelle Setups.
- **React-Unterstützung (v10.3+)**: Aktuell für React optimiert, weitere Frameworks sind geplant.

## So funktioniert es

1. Addon installieren: `npx storybook add @storybook/addon-mcp`
2. Ihren Storybook-Dev-Server starten.
3. Einen beliebigen MCP-kompatiblen KI-Agenten (Claude, Cursor, etc.) mit dem MCP-Endpunkt verbinden.
4. Agenten haben nun direkten Zugriff auf Ihr lebendes Designsystem für kontextbewusste Code-Generierung.

Dies schafft einen iterativen Workflow, bei dem Agenten Code generieren, ihn über Stories vorschauen, Tests ausführen und Probleme beheben, ohne ständiges menschliches Eingreifen.

## Vorteile für Entwickler

- **Höhere Qualität der KI-Ausgaben**: Agenten folgen Ihren etablierten Mustern und Komponenten-APIs, wodurch Halluzinationen und Nacharbeit reduziert werden.
- **Token-Effizienz**: Kleinere, fokussierte Kontext-Pakete bedeuten bessere Performance und niedrigere Kosten.
- **Schutzmaßnahmen für Produktions-UI**: Test-Feedback-Schleifen helfen Agenten, Code zu liefern, der Ihren Standards entspricht.
-[Beschleunigte Frontend-Entwicklung**: Ideal für Design-System-Teams, große Codebasen und agentische Workflows.

## Anwendungsfälle

- Generierung neuer UI-Features unter Wiederverwendung Ihrer Komponentenbibliothek.
- Konvertierung von Figma-Designs in Produktionscode, der mit Ihren bestehenden Storybook-Komponenten übereinstimmt.
- Autonomes Schreiben und Testen von Stories für die Komponentenabdeckung.
- Verbesserung von KI-Codierungstools (z.B. Cursor, Windsurf oder eigene Agenten) mit frontendspezifischer Intelligenz.
- Aufrechterhaltung der Konsistenz in großen Designsystemen in Teamumgebungen.

## Installation & Erste Schritte

Erfordert Storybook 10.3+ (React-Renderer).

```bash
# Storybook aktualisieren
npx storybook@latest upgrade
```

# Füge das MCP-Addon hinzu
npx storybook add @storybook/addon-mcp
```

Führe dann `storybook dev` aus und verbinde deinen Agent mit `http://localhost:6006/mcp` (Port kann abweichen).

Für vollständige Dokumentation, besuche die [offiziellen Storybook AI / MCP Docs](https://storybook.js.org/docs/ai/mcp/overview).

## Verwandte Ressourcen

- Offizieller Blog: [Storybook MCP für React](https://storybook.js.org/blog/storybook-mcp-for-react/)
- GitHub: [storybookjs/mcp](https://github.com/storybookjs/mcp)
- npm: [@storybook/addon-mcp](https://www.npmjs.com/package/@storybook/addon-mcp)

## Tags

- storybook
- mcp
- ki-agent
- react
- ui-komponenten
- design-system
- frontend
- typescript

## Sources

- [Project website](https://storybook.js.org/docs/ai/mcp/overview)