# 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`](https://docs.astral.sh/uv/) installed

### 1. Install uv if needed (Python Package Manager)

```bash
# 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**.

```json
{
  "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**.

```json
{
  "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