Skip to content
Vinkius

Storybook Connector for AI agents.

6 live capabilities

Query your design system and get component props directly in your editor.

Live agent request Storybook / Connector

Waiting for input…

AI Agent

Why people use Storybook

Storybook for Design System AI Integration

This Connector changes that by bringing your design system into your AI's workspace. Your agent can query the library directly, meaning you just ask for the component details and get them instantly. You get to stay in your flow without the tab-switching headache.

  • Claude
  • ChatGPT
  • Gemini
  • Cursor
  • Visual Studio Code
  • Windsurf

What Vinkius changes

You get your design system's data directly into your AI's context so you can stop guessing what components to use.

Use it from Claude, ChatGPT, Cursor or another AI client you already have.

One account · 5,900+ Connectors

  1. Real-world use case 01

    Checking a Button's props

    A developer asks the agent to find the Primary Button and show its props.

  2. Real-world use case 02

    Finding a missing component

    A developer wants to see if a 'DatePicker' exists.

  3. Real-world use case 03

    Getting a preview

    A designer wants to see the new layout.

Complete set · 6capabilities

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 Capability

    Extract docs guidance

    Retrieves the specific path or notes on how to read a component's docs. It helps you find the right documentation for your team.

  2. 02 Capability

    Get preview url

    Creates a link to an isolated sandbox preview for a component. You can click this to see the component live in a browser.

  3. 03 Capability

    Get story args

    Pulls the metadata and default arguments for a specific component. It gives your AI the exact prop signatures it needs to write code.

Capability set02 / 02

04—06

3 capabilities in this set.

Part of 6 available through Storybook.

  1. 04 Capability

    List categories

    Lists the top-level folders like Atoms or Molecules in your design system. This helps you understand the overall folder structure.

  2. 05 Capability

    List components

    Shows all the UI components available in your Storybook library. You can use this to see everything your team has built.

  3. 06 Capability

    Search components

    Finds specific components based on keywords you type in. This is the fastest way to see if a component already exists.

Set up in minutes

One URL. Then ask Storybook to work.

Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Storybook from the conversation.

Choose your client

Live preview
Advanced clients IDE · CLI

Claude · Web + desktop

Official guide ↗

Connector URL · ready to paste

Streamable HTTP
https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp
  1. Step 01

    Open Connectors

    In Claude Web or Claude Desktop, open Settings and choose Connectors.

  2. Step 02

    Add the URL

    Choose Add custom connector, name it Storybook, and paste the URL above.

  3. Step 03

    Turn it on in chat

    Select +, open Connectors, and enable Storybook for the conversation.

Where the request belongs

Work Storybook can move forward.

Built around the request

The frontend engineer who's tired of clicking through dashboards at 2am to find a simple button prop or the UI designer who needs to verify that production components match the design tokens.

01

Frontend Engineer

You use this on a Tuesday afternoon to quickly check if a 'Modal' component already exists before you spend an hour building a new one.

02

UI/UX Designer

You use this to audit the component library and ensure that the implementation details align with the latest design tokens.

03

Technical Writer

You use this to automatically pull documentation pathways to keep your internal style guides accurate and up to date.

Build the capability set

Add more capabilities.

Each Connector adds new actions and data without changing how you work.

Browse Connectors
MasterGo logo
01 10 capabilities

MasterGo

Collaborative design platform and UI/UX capability. manage design files, nodes, and comments via AI.

View Connector
Pixso logo
02 10 capabilities

Pixso

Collaborative design platform and UI/UX capability. manage design files, nodes, and teams via AI.

View Connector
Plasmic (Visual Headless Page Builder) logo
03 9 capabilities

Plasmic (Visual Headless Page Builder)

Manage Plasmic projects, pages, and components via AI. list projects, inspect page structures, and trigger publishes directly.

View Connector
Figma logo
04 16 capabilities

Figma

Access Figma design files, comments, components and images via API. inspect nodes, render exports and track version history from any AI agent.

View Connector
Design Prover logo
05 1 capability

Design Prover

Every AI frontend looks identical: hero, 3 cards, 3 cards, CTA, rounded-xl, shadow-lg, blue/gray/white. Design Prover forces the agent to prove its design has dramatic hierarchy, unpredictable layout, intentional whitespace, commanding typography, and color with actual personality.

View Connector
Builder.io logo
06 10 capabilities

Builder.io

Manage your visual CMS via Builder.io. track content entries, models, and symbols directly from any AI agent.

View Connector

Bring your own AI

Change the model, client or framework. Keep Storybook connected.

  • Claude
  • ChatGPT
  • Gemini
  • Cursor
  • VS Code
  • Windsurf
  • ZCode
  • Cline
  • Zed
  • Continue
  • Kiro
  • Roo Code
  • Zencoder
  • Goose
  • Void
  • Augment Code
  • Amp
  • Qodo
  • Tabnine
  • Pieces
  • Sourcegraph Cody
  • JetBrains
  • Warp
  • Amazon Q
  • Antigravity
  • BoltAI
  • Raycast
  • Jan
  • LM Studio
  • AnythingLLM
  • Open WebUI
  • Msty
  • Cherry Studio
  • LibreChat
  • TypingMind
  • Chorus
  • 5ire
  • n8n
  • LangChain
  • LlamaIndex
  • CrewAI
  • Vercel AI SDK

Before you connect

Questions about Storybook.

The practical details behind the request, access and result.

What is the Storybook MCP?

It's a way to connect your Storybook design system directly to your AI client. It lets your agent see your components, props, and documentation so it can help you write code that matches your team's standards.

How do I connect my design system to my AI?

You just need to provide your Storybook URL in the connection settings. The Connector then reads your Storybook's index to make your components available to your agent.

Can my AI agent see my component props?

Yes, it can. Your agent can pull the exact metadata and default arguments for any component in your library, which helps it write more accurate code.

Does this work with my specific Storybook instance?

It works with any deployed Storybook instance that generates a static index. This gives your agent a direct line of sight into your specific UI components.

How does this help prevent duplicate UI components?

By letting your agent search your existing library before you start building, you can quickly see if a component already exists, saving you from creating duplicates.

Can I get preview links for components?

Yes, the Connector can generate links to isolated sandbox previews. This lets you see the component live in a browser without having to navigate your full Storybook site.

Does it require API keys or OAuth?

No. The Connector 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.

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.

Which UI frameworks are supported?

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

One connection away

Give your agent a direct line to Storybook.

Connect Storybook once. Keep it beside 5,900+ managed Connectors when the next task needs more.

Explore every Connector No credit card required · Free tier available