An astronaut overseeing a futuristic data hub
PDF herunterladenMarkdown-Version

Verbinden Sie Storybook mit ChatGPT, Claude und Gemini

Richten Sie es einmal ein und es funktioniert mit ChatGPT, Claude, Cursor und jedem anderen Client, den Sie lieben. Alles läuft sicher im Hintergrund, damit Sie sich entspannen und sich auf das Wesentliche konzentrieren können. Bringen Sie Ihre UI-Komponenten direkt in den Kontext Ihrer KI.

Fragen Sie die KI zu diesem Connector

Entwickelt, gewartet und gehostet von Vinkius.

MCP VERIFIZIERT · PRODUKTIONSREIF · VINKIUS GARANTIE

Waiting for input…

Works with modern AI clients that support MCP, including ChatGPT, Claude, Cursor, and more.

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

Ihre KI erledigt die Arbeit. Wir halten alles sicher und geschützt.

Kein anderes KI-Tool bietet Ihnen das. Ihr Workflow läuft im Client, den Sie bereits lieben, Ihr Konto bleibt geschützt, und Sie entscheiden, was der Agent darf und was nicht. Das ist der ganze Grund für den Wechsel.

Jeder Connector lebt in unserer Infrastruktur, dort wo Ihr Workflow läuft. Die drei Dinge unten sind bereits Teil davon und arbeiten leise im Hintergrund, damit Sie nie darüber nachdenken müssen. Nichts hinzuzufügen, nichts einzurichten, keine Sorgen.

A futuristic MCP client docking bay
V8 Isolate01

Jeder Connector läuft in seiner eigenen abgeschotteten Umgebung.

Jeder Connector läuft in einer eigenen abgeriegelten V8-Laufzeit — kein Zugriff auf Ihre Dateien, Ihr System oder andere Server. Ein Connector sieht nie über seine eigene Anfrage hinaus.

Kill-Switch02

Ein Schalter stoppt jeden Agenten. Sofort.

Eine einzige Aktion deaktiviert jeden Connector, entzieht jedes Token und beendet jede Sitzung auf einmal. Die AI Governance bewahrt das Protokoll.

FinOps pro Nutzer03

Ausgabelimits, die anhalten, statt Sie zu überraschen.

Jeder Nutzer behält eigene Verbindungen und Anmeldedaten, isoliert von allen anderen. Was Ihr Ausgabelimit überschreiten würde, wird zurückgehalten und wartet auf Ihre Freigabe, anstatt abgerechnet zu werden.

Drei Kontrollen, eingebaut in die Schicht, über die sich Ihre KI verbindet.

Kuratiertes Set · 6 Fähigkeiten

Wir liefern nur die Aktionen, die zählen.

Fähigkeiten-Set01 / 02

01-03

3 Fähigkeiten in diesem Set.

Teil von 6, verfügbar über Storybook.

  1. 01

    Komponenten suchen

    Suchen Sie gezielt nach bestimmten UI-Komponenten anhand von Namen oder Schlagworten.

  2. 02

    Komponentendetails abrufen

    Holen Sie Metadaten und Standardargumente für eine spezifische Komponente ab.

  3. 03

    Komponenten auflisten

    Listen Sie alle verfügbaren UI-Komponenten des Storybook Design-Systems auf, optional gefiltert nach Kategorien.

Fähigkeiten-Set02 / 02

04-06

3 Fähigkeiten in diesem Set.

Teil von 6, verfügbar über Storybook.

  1. 04

    Dokumentations-Anleitung abrufen

    Erhalten Sie Hilfestellungen dazu, wie die Dokumentation einer bestimmten Komponente zu lesen ist.

  2. 05

    Kategorien auflisten

    Zeigt die oberste Hierarchie und die Ordnerstruktur Ihres Design-Systems an.

  3. 06

    Vorschau-URL generieren

    Erstellen Sie eine URL für eine isolierte Sandbox-Vorschau einer Komponente.

Echte Arbeit

Was Teams täglich ausführen

01

Component Discovery

Ask your agent to find if a specific UI pattern already exists in your library before you start coding it.

02

Prop Verification

Use the agent to check the exact types and default values for a component's arguments.

03

Rapid Prototyping

Generate preview URLs for components to quickly verify visual changes in a sandbox.

04

Code Mapping

Locate the exact file paths for components to help your agent write more accurate imports.

Eine Aufgabe automatisieren

Bringen Sie Storybook für eine Sache an die Arbeit.

Schritt-für-Schritt-Automatisierungen, die Ihre KI über diesen Connector ausführt: der Ablauf, die Prompts für den Einstieg und die genauen Fähigkeiten hinter jedem Schritt.

Ein Connector, jede KI

Storybook funktioniert mit den beliebtesten KI-Clients.

Dies sind die beliebtesten Clients, jeder mit einer Schritt-für-Schritt-Anleitung: ein Link, einmal eingerichtet, mit Governance und Sichtbarkeit an Bord. Und da alles auf dem MCP-Standard läuft, funktioniert dieselbe Verbindung auch in jedem anderen kompatiblen Client — nichts neu zu bauen.

ClaudeClaudeChatGPTChatGPTGeminiGeminiPerplexityPerplexityGrokGrokMicrosoft CopilotMicrosoft CopilotCursorCursorVS CodeVS CodeWindsurfWindsurfJetBrainsJetBrainsClineClineLangChainLangChainVercel AI SDKVercel AI SDKLovableLovableZ.aiZ.aiRaycastRaycastQwen CodeQwen CodeKimi CodeKimi CodeLe ChatLe Chat

Bauen Sie Ihre eigene App? Der Connector gehört Ihnen.

Sie brauchen keinen Client, um Storybook arbeiten zu lassen: dieselbe gehostete Verbindung speist Ihre eigenen Anwendungen und Ihren Agenten-Code, mit derselben Governance bei jeder Anfrage. Damit bauen, damit chatten — eine Verbindung für beides.

Beobachtet, nicht geschätzt

Durchschnitt 889ms. Schnell in der Produktion.

Storybook wird täglich gegen den Live-Service geprüft.

TagesdurchschnittSpitze 1013ms
3. Okt.Heute
Schnellster Tag
750ms
Langsamster Tag
1013ms
14-Tage-Trend
Verlangsamend+8%

Verbinden Sie Ihren Client

Eine URL. Jeder Client.

Aktivieren Sie den Connector, kopieren Sie Ihren Link und fügen Sie ihn in den Client ein, den Sie bereits nutzen. 6 Fähigkeiten kommen einsatzbereit an.

Vorschauzugang · keine Anbieter-Authentifizierung

Das vk_preview_*-Token gehört zur Vorschau-Infrastruktur von Vinkius. Es ermöglicht Claude, die Fähigkeiten von Storybook zu entdecken und anzuzeigen, damit Sie das Erlebnis in Ihrer KI sehen.

Es authentifiziert Ihr Konto nicht bei Storybook. Aktionen, die Anmeldedaten oder echte Kontodaten erfordern, werden möglicherweise erst ausgeführt, wenn Sie den Connector aktivieren und den Dienst autorisieren.

Storybook Connector

Alles bereit. Wählen Sie Ihren MCP-Client und folgen Sie den Einrichtungsschritten.

Connector-Linkhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Folgen Sie den Schritten unten, um sich in Sekunden zu verbinden.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Storybook capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Schritt-für-Schritt-Anleitungen für jeden Client finden Sie im Guide. Verbinden

Geführte Einrichtung für Claude? Storybook in Claude und anderen KI-Tools einrichten

Alle KI-Clients ansehen, mit denen dieser Connector funktioniert ↑

Für wen

Für die Arbeit, die Storybook-Nutzer abgeben.

Dieser MCP ist für Teams optimiert, die Design-Systeme und KI-gestützte Entwicklung eng miteinander verknüpfen wollen.

  • 01

    Frontend-Entwickler

    Finden Sie bestehende UI-Elemente und deren Eigenschaften schnell, ohne die Entwicklungsumgebung zu verlassen.

  • 02

    UI/UX Designer

    Validieren Sie implementierte Komponentenstrukturen programmatisch, um die Übereinstimmung mit Design-Tokens sicherzustellen.

  • 03

    Technical Writer

    Extrahieren Sie automatisch Dokumentationspfade aus Storybook, um konsistente Richtlinien für das Design-System zu pflegen.

FAQ

Fragen von Storybook-Nutzern.

  • 01

    How does the MCP get my component data?

    The MCP reads the static index.json file that Storybook generates, which contains the full hierarchy of your components.

  • 02

    Do I need to change my Storybook setup?

    No, you just need to provide the URL of your already deployed Storybook instance.

  • 03

    Can I see what the components look like?

    Yes, you can ask your agent to generate a preview URL, which provides an isolated iframe sandbox for the component.

  • 04

    Which AI clients can use this?

    This MCP works with any MCP-compatible client, including Claude, Cursor, Windsurf, and VS Code.

  • 05

    Can it help me write code?

    Yes, by retrieving prop signatures and local source paths, it gives your agent the context needed to write accurate implementation code.

  • 06

    Does it require API keys or OAuth?

    No. The MCP reads the static index.json file generated by your Storybook build. As long as the agent can reach the STORYBOOK_URL over the network, no additional authentication is needed.

  • 07

    Is the integration read-only?

    Yes. The AI reads component metadata, props, and documentation from the static index. It cannot modify actual React, Vue, or Angular source files through this integration.

  • 08

    Which UI frameworks are supported?

    Any framework supported by Storybook. React, Vue, Angular, Svelte, Web Components, and more. The MCP reads the universal index.json format, which is framework-agnostic.

Entdecken

Mehr in Loved By Devs

Vorschläge

Verbinde Storybook mit Claude, Cursor, ChatGPT & mehr