Simple Storybook Preview MCP

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.

Related MCP server: Storybook MCP

Configuration

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