An astronaut overseeing a futuristic data hub
Download PDFMarkdown Version

Connect Storybook to ChatGPT, Claude and Gemini

Set it up once and it works in ChatGPT, Claude, Cursor, and any other client you love. It all runs safely in the background, so you can relax and focus on what really matters. Bring your component library directly into your AI workflow.

Ask AI about this Connector

Developed, maintained, and hosted by Vinkius.

MCP VERIFIED · PRODUCTION READY · VINKIUS GUARANTEED

Waiting for input…

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

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

Your AI does the work. We keep it safe and sound.

No other AI tool gives you this. Your workflow runs in the client you already love, your account stays protected, and you decide what the agent can and cannot do. It is the whole reason to make the switch.

Each Connector lives inside our infrastructure, the same place where your workflow runs. The three things below are already part of it, working quietly in the background so you never have to think about them. Nothing to add, nothing to set up, nothing to worry about.

A futuristic MCP client docking bay
V8 Isolate01

Each Connector runs inside its own sealed environment.

Each Connector runs inside its own sealed V8 runtime — no access to your files, your system, or other servers. A Connector never sees past its own request.

Kill Switch02

One switch stops every agent. Instantly.

One action deactivates every Connector, revokes every token, and ends every session at once. AI Governance keeps the record.

FinOps per User03

Spending limits that pause instead of surprise.

Every user keeps their own connections and credentials, isolated from everyone else. Anything that would cross your spending limit is held for your approval, not billed.

Three controls, built into the layer your AI connects through.

Curated set · 6 capabilities

We ship only the actions that matter.

Capability set01 / 02

01-03

3 capabilities in this set.

Part of 6 available through Storybook.

  1. 01

    Get preview URL

    Generates a direct URL to an isolated sandbox iframe for a specific component.

  2. 02

    Get story args

    Retrieves the metadata and default arguments for a component so your agent knows exactly which props to use.

  3. 03

    List components

    Lists all available UI components in your design system, with an optional filter for specific category folders.

Capability set02 / 02

04-06

3 capabilities in this set.

Part of 6 available through Storybook.

  1. 04

    Extract docs guidance

    Provides the necessary guidance for your agent to read and interpret component documentation.

  2. 05

    List categories

    Shows the top-level categories and the folder structure of your design system.

  3. 06

    Search components

    Searches your component library using specific names or keywords.

Real work

What teams actually run

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.

Automate a task

Put Storybook to work on one thing.

Step-by-step automations your AI runs through this Connector: the workflow, the prompts to start with, and the exact capabilities behind each move.

One connector, every AI

Storybook works with the most popular AI clients.

These are the most popular clients, each with a step-by-step guide: one link, set up once, with governance and visibility built in. And because everything runs on the MCP standard, the same connection also works in any other compatible client — nothing to rebuild.

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

Building your own app? The connector is yours to use.

You don't need a client to put Storybook to work: the same hosted connection plugs into your own applications and agent code, with the same governance on every request. Build with it, chat with it — one connection for both.

Observed, not estimated

889ms average. Fast in production.

Storybook is checked daily against the live service.

Daily averagePeak 1013ms
Oct 3Today
Fastest day
750ms
Slowest day
1013ms
14-day trend
Slowing+8%

Connect your client

One URL. Every client.

Activate the Connector, copy your link, and paste it into the client you already use. 6 capabilities arrive ready to run.

Preview access · not provider authentication

The vk_preview_* token belongs to Vinkius preview infrastructure. It lets Claude discover and display the capabilities of Storybook, so you can see the experience inside your AI.

It does not authenticate your account with Storybook. Actions requiring credentials or live account data may not run until you activate the Connector and authorize the service.

Storybook Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  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.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Step-by-step instructions for each client are in the guide. How to connect

Guided setup for Claude? Set up Storybook in Claude and other AIs

See all the AI clients this connector works with ↑

Who it's for

Built for the work Storybook owners hand off.

This MCP is built for teams working with structured design systems who want to bridge the gap between UI documentation and code implementation.

  • 01

    Frontend Engineers

    They use the MCP to find existing components and their props without switching to a browser.

  • 02

    UI/UX Designers

    They use the agent to audit how design tokens are actually implemented in the deployed system.

  • 03

    Technical Writers

    They use the capability to pull documentation paths to keep design guidelines in sync with code.

FAQ

Questions Storybook owners ask.

  • 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.

Explore

More in Loved By Devs

Suggestions

Connect Storybook to Claude, Cursor, ChatGPT & more