Storybook Preview MCP

See your components render live inside the IDE as the AI edits them. No switching windows.

MCP Apps TypeScript Cursor IDE Storybook 7+

Large button icon customization

◆ change the large button to have an optional icon

# button.css +7 -1

  .storybook-button {
-   display: inline-block;
+   align-items: center;
+   display: inline-flex;
    ...

⚙ Button.stories.tsx +14

  const RocketIcon = () => (
+   <svg fill="none" ...
  ...
      backgroundColor: { control: 'color' },
+     icon: { control: false },
  },

▷

Ran Render Component in storybook-preview ⌄

Example/Button Large

file ./src/stories/Button.tsx story ./src/stories/Button.stories.tsx export Large

dev test manifest autodocs

🚀 Button

The large button now supports an optional icon.

Quick Start

Add to your MCP config

Add this to .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "storybook-preview": {
      "command": "npx",
      "args": ["-y", "simple-storybook-preview-mcp"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006"
      }
    }
  }
}

Start your Storybook dev server

npm run storybook

Ask the AI to edit a component

The preview panel appears automatically whenever the AI modifies a component that has a Storybook story. No manual action needed.

Configuration

Env Variable	Default	Description
`STORYBOOK_URL`	`http://localhost:6006`	Base URL of your running Storybook dev server
`DEBUG`	`false`	Set to `true` or `1` to show a debug log panel in the preview

How Story IDs Work

The AI derives story IDs from your Storybook file structure. The pattern is:

title segments lowercased, joined by dashes
  + double-dash
  + story export name lowercased

Examples:
  title: "Components/Button"  export: "Primary"   → components-button--primary
  title: "Forms/Input"        export: "WithLabel"  → forms-input--withlabel
  title: "Layout/Sidebar"     export: "Collapsed"  → layout-sidebar--collapsed

Features

⚡

Auto-preview

Renders automatically after AI edits a component with a story

🎨

Theme support

Light and dark themes, follows OS preference or set explicitly

📄

Story metadata

Shows component title, variant, file path, and tags

🔒

CSP-safe

Proper Content Security Policy for iframe embedding

📦

Zero config

Works with npx, just set STORYBOOK_URL and go

🐛

Debug mode

Optional debug panel for troubleshooting MCP communication

Requirements

Node.js 18+ and a running Storybook 7+ dev server. Works with any framework Storybook supports (React, Vue, Angular, Svelte, etc.).

Requires an IDE with MCP Apps support (e.g. Cursor).