• VISUELL
  • SUCHE
  • PRÜFUNG
  • MENSCH

Storybook Komponenten mit deiner KI in der Sandbox vorschauen

Verbinde Storybook einmal mit deinem KI-Client. Danach kannst du Live-Vorschauen deiner Komponenten direkt in deiner Konversation aufrufen.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie kann ich meine Storybook Komponenten im KI-Chat sehen?

Deine KI nutzt den Storybook MCP, um gezielt Komponenten zu finden und dafür eindeutige iframe-URLs zu generieren. Du erhältst einen direkten Link zu einer Sandbox-Umgebung, in der die Komponente isoliert gerendert wird. So kannst du visuelle Änderungen oder das Verhalten sofort prüfen, nachdem du die KI um ein Code-Update gebeten hast.

Die Ergebnisse

Das bietet dir diese Verbindung

Die KI übernimmt die technische Suche und URL-Generierung, damit du dich voll auf das UI konzentrieren kannst.

VISUELL

Sofortige Komponenten-Vorschau

Die KI findet die richtige Komponente und liefert eine URL. Ein Klick genügt, um die Komponente in einem isolierten iframe zu sehen.

SUCHE

Komponenten finden

Wenn du den exakten Namen nicht weißt, durchsucht deine KI deine Storybook-Library, um die passende Komponente zu finden.

PRÜFUNG

Schnelles visuelles Feedback

Nachdem die KI den Code geändert hat, kannst du sofort eine neue Vorschau-URL abrufen, um zu prüfen, ob die Korrektur funktioniert hat.

MENSCH

Manuelle Code-Edits

Die KI kann deine lokalen Dateien nicht umschreiben oder Commits pushen. Das Speichern der Dateien und deine Git-Workflows erledigst du weiterhin selbst.

Der Ablauf

Was deine KI tut, wenn du eine Vorschau anforderst.

Die KI fungiert als Brücke zwischen deinem Chat-Interface und deiner Storybook-Instanz.

  1. Komponente lokalisieren

    Die KI scannt deine Storybook-Library, um die gewünschte Komponente zu identifizieren.

    search_components

  2. Sandbox-Link generieren

    Sobald die Komponente gefunden wurde, erstellt die KI eine direkte URL, die auf einen isolierten iframe der Komponente verweist.

    get_preview_url

  3. URL bereitstellen

    Die KI zeigt dir den anklickbaren Link direkt im Chatfenster an.

    get_preview_url

  4. Änderungen validieren

    Nach einer visuellen Anpassung wiederholt die KI die Suche und Generierung, um den aktualisierten Zustand anzuzeigen.

    search_componentsget_preview_url

Probieren Sie es

Kopiere diese Beispiele zum Start.

Nutze diese Prompts, um die Storybook-Tools zu aktivieren.

Startpunkte

Dies sind Basisanfragen. Ersetze die Komponentennamen einfach durch die aus deinem Projekt.

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"
    }
  }
}
In den Chat kopieren04

  • Finde die Button-Komponente in Storybook und gib mir eine Vorschau-URL.

  • Suche nach allen Komponenten zum Thema 'Navigation' und zeige mir deren Vorschau-Links.

  • Ich muss die Modal-Komponente in einer isolierten Sandbox sehen. Kannst du die URL holen?

  • Zeig mir die Vorschau für die PrimaryButton-Komponente, damit ich das Padding prüfen kann.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Starten Sie hier

Einmal Storybook verbinden, dann fragen.

Verknüpfe deine Storybook-Instanz einfach mit Vinkius. Deine Zugangsdaten bleiben verschlüsselt und du kannst sofort in jedem MCP-kompatiblen Client Komponenten vorschauen.

Storybook mit deiner KI verbinden

FAQ

So funktioniert die Storybook-Vorschau

  • 01

    Kann die KI meinen Komponenten-Code direkt ändern?

    Nein. Die KI kann lediglich Komponenten finden und Vorschau-URLs generieren. Code-Änderungen musst du in deinem eigenen Editor vornehmen.

  • 02

    Benötigt die KI meinen Storybook-Login?

    Nein. Du verbindest den MCP über Vinkius, der die Verbindung sicher verwaltet. Dein KI-Client benötigt deine Zugangsdaten nicht.

  • 03

    Kann die KI neue Stories für mich erstellen?

    Nein. Die Tools erlauben es der KI nur, in bestehenden Komponenten zu suchen und URLs für vorhandene Stories abzurufen.

  • 04

    Zeigt die Vorschau meine lokalen Umgebungsvariablen?

    Die Vorschau-URL verweist auf deine Storybook-Instanz. Das Verhalten hängt davon ab, wie deine Storybook-Konfiguration mit Daten umgeht.

  • 05

    Kann ich das mit Cursor nutzen?

    Ja. Jeder MCP-kompatible Client wie Cursor, Claude oder Windsurf kann dies nutzen, sobald die Verbindung steht.

  • Weitere Fragen zu Storybook? Alle Funktionen des Storybook Connectors ansehen

Verbinde Storybook mit Claude, Cursor, ChatGPT & mehr