Storybook MCP Server

An MCP (Model Context Protocol) server that integrates with a running Storybook instance. It lets AI-powered coding tools browse your component library, inspect individual components, and scaffold brand-new components from natural language.

Features

Tool	Description
storybook_list_components	List & search every component in your running Storybook
storybook_get_component	Get stories, arg types, default args, and Storybook URLs for a component
storybook_create_component	Scaffold a component + Storybook story from a plain-English description
storybook_compose_view	Compose existing components into a higher-order page/view with layout, state, and wiring

Quick Start

Prerequisites

• Python ≥ 3.10
• A running Storybook instance (v7+)
• uv installed

1. Install uv if needed (Python Package Manager)

# Install via Homebrew
brew install uv

# Or via curl
curl -LsSf https://astral.sh/uv/install.sh | sh

Note: The storybook-mcp package itself does NOT need to be installed separately. The MCP configuration uses uvx which automatically downloads and runs the package when needed.

Configuration by Editor

Configuration Format A: Project-Relative Paths

Use this configuration for Cursor, Windsurf, Roo Code, and Kilo Code.

{
  "mcpServers": {
    "storybook": {
      "command": "uvx",
      "args": ["storybook-mcp"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006",
        "STORYBOOK_COMPONENTS_DIR": "relative/path/to/your/storybook/components",
        "STORYBOOK_FRAMEWORK": "react",
        "STORYBOOK_STYLE_TECH": "tailwind",
        "STORYBOOK_TYPESCRIPT": "true"
      }
    }
  }
}

Configuration File Locations:

• Cursor: .cursor/mcp.json (project root - already created in this project)
• Windsurf: .windsurf/mcp.json (project root)
• Roo Code: .roo/mcp.json (project root)
• Kilo Code: .kilocode/mcp.json (project root)

Configuration Format B: Absolute Paths

Use this configuration for Claude Desktop and Claude CLI.

{
  "mcpServers": {
    "storybook": {
      "command": "uvx",
      "args": ["storybook-mcp"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006",
        "STORYBOOK_COMPONENTS_DIR": "/absolute/path/to/frontend/src/apps/core/shared/core-components",
        "STORYBOOK_FRAMEWORK": "react",
        "STORYBOOK_STYLE_TECH": "tailwind",
        "STORYBOOK_TYPESCRIPT": "true"
      }
    }
  }
}

Configuration File Locations:

• Claude Desktop (macOS): ~/Library/Application Support/Claude/claude_desktop_config.json
• Claude CLI (Linux/macOS): ~/.config/claude/claude_desktop_config.json
• Claude CLI (Windows): %APPDATA%\Claude\claude_desktop_config.json

Note: Claude Desktop and Claude CLI require absolute paths for STORYBOOK_COMPONENTS_DIR.

Usage Examples

Once configured, you can use natural language commands:

List Components

"List all components in Storybook"
"Show me all button components"

Inspect Component

"Show me the details for the Core/UI/Button component"
"What props does the DataTable accept?"

Create Component

"Create a new AlertBanner component with info, warning, and error variants"
"Build a StatusIndicator component with online/offline/away states"

Compose Page

"Compose a SettingsPage using Sidebar, Tabs, TextInput, Toggle, and Button"
"Build a DashboardView with Card, Chart, DataTable, and Badge components"

Troubleshooting

MCP Server Not Connecting

• ✅ Ensure Storybook is running at http://localhost:6006
• ✅ Restart your editor/CLI after creating/modifying the MCP configuration file
• ✅ Verify uv is installed: uv --version
• ✅ Check that the configuration file is in the correct location for your tool

Components Not Found

• ✅ Check that Storybook is fully loaded in browser
• ✅ Component titles are case-sensitive
• ✅ Use storybook_list_components to see available components