• VISUAL
  • SEARCH
  • VERIFY
  • HUMAN

How to preview components in a sandbox with your AI

Connect Storybook to your AI client once. After that, you can pull up live component previews directly in your conversation.

Ask AI about this page

Short answer

How can I see my Storybook components in my AI chat?

Your AI uses the Storybook MCP to find specific components and generate unique iframe URLs for them. You get a direct link to a sandbox environment where the component renders in isolation. This lets you check visual changes or behavior immediately after asking for a code update.

The outcomes

What you get from this connection

The AI handles the technical lookup and URL generation, leaving you to focus on the UI.

VISUAL

Instant component previews

The AI finds the right component and provides a URL. You click it to see the component rendered in an isolated iframe.

SEARCH

Component discovery

If you don't know the exact name, your AI searches your Storybook library to find the right match.

VERIFY

Rapid visual feedback

After the AI modifies code, you can immediately pull a new preview URL to check if the fix worked.

HUMAN

Manual code edits

The AI can't rewrite your local files or push commits. You still handle the actual file saving and git workflows.

The workflow

What your AI does when you ask for a preview.

The AI acts as the bridge between your chat interface and your Storybook instance.

  1. Locate the component

    The AI scans your Storybook library to identify the specific component you want to view.

    search_components

  2. Generate the sandbox link

    Once found, the AI creates a direct URL that points to an isolated iframe of that component.

    get_preview_url

  3. Deliver the URL

    The AI presents the clickable link in your chat window for immediate access.

    get_preview_url

  4. Validate changes

    After you request a visual tweak, the AI repeats the lookup and generation to show the updated state.

    search_componentsget_preview_url

Try it

Copy these to start.

Use these prompts to trigger the Storybook tools.

Starting points

These are basic requests. Swap out the component names for the ones in your actual project.

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"
    }
  }
}
Copy into chat04

  • Find the Button component in Storybook and give me a preview URL.

  • Search for all components related to 'Navigation' and show me their preview links.

  • I need to see the Modal component in an isolated sandbox. Can you get the URL?

  • Show me the preview for the PrimaryButton component so I can check the padding.

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

Start here

Connect Storybook once, then ask.

Just link your Storybook instance to Vinkius. Your credentials stay encrypted, and you'll be ready to preview components in any MCP-compatible client.

Connect Storybook to your AI

FAQ

How the Storybook preview works

  • 01

    Can the AI change my component code directly?

    No. The AI can only find components and generate preview URLs. You must apply code changes in your own editor.

  • 02

    Does the AI need my Storybook login?

    No. You connect the MCP through Vinkius, which manages the connection securely. Your AI client doesn't need your credentials.

  • 03

    Can the AI create new stories for me?

    No. The tools only allow the AI to search existing components and get URLs for existing stories.

  • 04

    Will the preview show my local environment variables?

    The preview URL points to your Storybook instance. It will behave based on how your Storybook is configured to handle data.

  • 05

    Can I use this with Cursor?

    Yes. Any MCP-compatible client like Cursor, Claude, or Windsurf can use this once connected.

  • More questions about Storybook? See everything the Storybook Connector can do

Connect Storybook to Claude, Cursor, ChatGPT & more