Storybook Preview

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

Documentation & Live Demo

Quick Start

Add to .cursor/mcp.json:

{
  "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), then ask the AI to edit a component — the preview appears automatically.

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

How Story IDs Work

The AI derives story IDs from your Storybook file structure:

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

"Components/Button" + "Primary" → components-button--primary
"Forms/Input" + "WithLabel"     → forms-input--withlabel

Requirements

• Node.js 18+
• Storybook 7+ dev server running
• IDE with MCP Apps support (e.g. Cursor)

Works with any framework Storybook supports (React, Vue, Angular, Svelte, etc.).

Links

• Documentation
• GitHub

License

MIT