MCP server

Storybook MCP Server

Storybook addon that gives agents your component docs and helps write and test stories. Official: built and maintained by Storybook. It runs locally on your machine over stdio. Setup below for 12 clients (checked 2026-10-25). Repo and registry data checked 2026-10-24.

Maintainer: Official · Storybook
Runs: Local (stdio)
Repo: storybookjs/storybook
GitHub: ★ 91,364 (whole repo, which holds more servers), last push 2026-10-24 (checked 2026-10-24)
License: MIT
Connects to: Storybook
DevHunt: Storybook on DevHunt

Install the Storybook MCP Server

Pick your client. Each tab starts the same local command. Config shapes checked against each client's docs on 2026-10-25.

Run in a terminal. Everything after -- is the command that starts the server. docs

claude mcp add --transport stdio storybook -- npx -y @storybook/addon-mcp

Claude Desktop only: Settings > Developer > Edit Config opens claude_desktop_config.json. Add this, save and restart the app. docs

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}

Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project), or use the install button. docs

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}

Add to Cursor

Add to .vscode/mcp.json (note the "servers" key and the type), or use the install button. Command Palette > "MCP: Open User Configuration" for all workspaces. docs

{
  "servers": {
    "storybook": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}

Add to VS Code

Run codex mcp add storybook -- npx -y @storybook/addon-mcp, or add this to ~/.codex/config.toml. docs

[mcp_servers.storybook]
command = "npx"
args = ["-y", "@storybook/addon-mcp"]

Run in a terminal (-s user adds it for all projects; the default is this project). docs

gemini mcp add -s user storybook npx -- -y @storybook/addon-mcp

Run in a terminal; it writes ~/.copilot/mcp-config.json. docs

copilot mcp add storybook -- npx -y @storybook/addon-mcp

Add to mcp_config.json: ~/.config/devin/mcp_config.json on macOS and Linux (older installs: ~/.codeium/windsurf/mcp_config.json), %APPDATA%\devin\ on Windows. docs

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}

Add to Zed's settings.json (or Settings > AI > MCP Servers > Add Server). Remote servers without an Authorization header sign in with OAuth. docs

{
  "context_servers": {
    "storybook": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}

Add to opencode.json in the project (or ~/.config/opencode/opencode.json). docs

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "storybook": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "@storybook/addon-mcp"
      ],
      "enabled": true
    }
  }
}

Add to ~/.kiro/settings/mcp.json (all projects) or .kiro/settings/mcp.json (this project). docs

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}

MCP Servers > Configure > Configure MCP Servers opens cline_mcp_settings.json; add this entry. docs

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}

Security notes

The local server runs with your user's permissions (npx downloads it from npm on first run).

Alternatives

all design & frontend MCP servers →

shadcn/uiofficial · ★ 126k
Browse, search and install components from shadcn/ui and other registries, built into the shadcn CLI.
Magic (21st.dev)official · ★ 6.2k
Generate React UI components from a prompt, inspired by 21st.dev's library.
draw.ioofficial · ★ 5.7k
Create draw.io diagrams from Mermaid or XML, shown live in the chat.
Excalidrawofficial · ★ 5.6k
Draw hand-drawn style Excalidraw diagrams that render live in the chat.
AntV Chartofficial · ★ 4.4k
Generate charts (line, bar, maps, flow diagrams and 20+ more) with AntV.
Miroofficial · ★ 163
Hosted server to read Miro boards and create diagrams, docs and tables on them.
Webflowofficial · ★ 140
Pages, CMS collections and site settings in Webflow, with a Designer companion app.
Wixofficial · ★ 15
Hosted server to build and manage Wix sites, stores, bookings and CMS data.

FAQ

What does the Storybook MCP Server do?+

Storybook addon that gives agents your component docs and helps write and test stories.

Is the Storybook MCP server official?+

Official: built and maintained by Storybook.

How do I add Storybook to Claude Code?+

Run: claude mcp add storybook -- npx -y @storybook/addon-mcp. Add --scope project to share it with your team through .mcp.json.

How do I use the Storybook MCP server in Cursor or VS Code?+

Open the Cursor or VS Code tab above: it has the mcp.json entry and a one-click install link. Cursor uses the "mcpServers" key; VS Code uses "servers" and needs a type ("stdio").

Does Storybook work in ChatGPT and claude.ai?+

No: it runs locally over stdio, and ChatGPT and claude.ai only connect to remote servers. Use it in Claude Desktop, Claude Code, Cursor, VS Code or another client that can start a local process.

What are the alternatives to the Storybook MCP server?+

Other design & frontend MCP servers: shadcn/ui, Magic (21st.dev), draw.io, Excalidraw and AntV Chart.

All MCP servers · What is an MCP server? · Agent skills