Download PDFMarkdown Version
ClaudeChatGPTPerplexityGeminiMicrosoft CopilotRaycastMeta AIGrokZ.aiQwenKimi
DeepSeekMistralCursorVS CodeWindsurfJetBrainsClineLovableVercel AI SDKLangChain

Use Storybook with your AI.

Connect your account once and let the AI you already use work with it, without building another integration. Connect your AI to Storybook. Explore your design system, inspect UI components, and retrieve implementation guidance programmatically.

Included with plan

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

Complete set · 6 capabilities

The complete Storybook capability set.

These are the exact actions your AI can choose when you ask it to work with Storybook.

Capability set01 / 02

01-03

3 capabilities in this set.

Part of 6 available through Storybook.

  1. 01

    Get preview URL

    Generate the preview URL for a component sandbox

  2. 02

    Get story args

    Get metadata and default arguments for a specific component

  3. 03

    List components

    You can optionally filter by category folder. List all UI components available in the Storybook Design System

Capability set02 / 02

04-06

3 capabilities in this set.

Part of 6 available through Storybook.

  1. 04

    Extract docs guidance

    Get guidance on how to read documentation for a component

  2. 05

    List categories

    G., Atoms, Molecules, Organisms). List the top-level categories and folder structure of the Design System

  3. 06

    Search components

    Search for specific components by name or keyword

Observed, not estimated

860ms average. Fast in production.

Storybook is checked daily against the live service.

Daily averagePeak 1188ms
Aug 20Today
Fastest day
702ms
Slowest day
1188ms
14-day trend
Slowing+10%

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

FAQ

Questions Storybook owners ask.

  • 01

    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.

  • 02

    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.

  • 03

    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