M
MCP Directory CURATED DIRECTORY
911 MCP servers indexed
中文
← Back to directory
S

Storybook MCP Addon

Official
Archived
MCP addon that runs inside your Storybook dev server so AI agents can write and test UI component stories.
How to install ↓ Compare GitHub source repository ↗
Category
Dev Tools #192 of 438
Stars
★ 270 Very popular
Transport
Streamable HTTP
Runtime
Node.js 24+
Credentials
No credential needed
License
MIT
Last commit
Tools
2
55FMRS · C

An officially maintained (storybookjs) MCP addon that runs inside the Storybook dev server, exposing component data over streamable-http so AI agents can write and validate stories; still experimental and only useful for local Storybook-based projects.

Strongest · Maintenance 13/20 Weakest · Reliability 8/20

Reliability
8/20
Security and permissions
12/20
Maintenance
13/20
Documentation
11/20
Setup experience
11/20
Why each score
Reliability 8/20
The manifest declares a streamable-http transport with a configurable port, and the README shows curl examples for tools/list and tools/call suggesting the expected MCP handshake. However, no actual tool list definitions, server source code, or reviewable test file contents are included in the provided material, and no concrete CI workflow file is visible to verify these claims. Static evidence cannot confirm that declared tools (e.g., list-all-documentation) match real behavior, nor whether error handling is controlled. Per the static calibration rule, without verifiable execution evidence the score is capped below 12; 8 reflects a plausible-but-thinly-evidenced happy path.
Security and permissions 12/20
The server defaults to binding localhost with a configurable port, is a local dev tool, and shows no hardcoded credentials, external exfiltration, or credential-theft indicators — no red line applies. However, the description states the tool 'automatically writes and tests stories' for UI components, implying file-write and test-execution side effects, and the provided material gives no indication of confirmation gating or explicit permission scoping for these actions, nor a full tool list in the manifest. Main risks are visible but confirmation/permission scoping is incompletely disclosed, yielding 12.
Maintenance 13/20
The repository is not archived, uses the MIT license, follows a Changesets-based release process, and the README states the project is under active development with format/lint/typecheck quality gates in place. 50 open issues against 266 stars is a relatively high ratio, and no direct commit history or release cadence evidence was provided in this review's material, precluding a top score. Overall governance and versioning structure are reasonably clear, warranting 13.
Documentation 11/20
The README is a thorough contributor guide covering install, development, testing, MCP Inspector debugging, and release process, but it targets contributors rather than end users. The manifest itself lacks tool parameter documentation, authentication details, limits, or troubleshooting guidance, and the user-facing README (inside packages/addon-mcp) referenced was not supplied for review. Missing tool-level parameter docs and end-user cost/limit disclosures bring this to 11.
Setup experience 11/20
The manifest specifies a clear npm package identifier, transport type, and configurable port (default 6006), and the README walks through pnpm install/build/start steps to reach a working Storybook MCP endpoint, offering reasonable clarity. However, no concrete mainstream client configuration example (e.g., Claude Desktop/Claude Code) is shown — only an indirect mention of a .vscode/mcp.json file. Per the static calibration rule, setup is capped at 15 absent real CI/test evidence; given the moderate evidence here, 11 is appropriate.

Static review · not runListed 2026-08-26

Read the FMRS scoring method →

Fit and risk

What it can accessUses the network

Best for

  • Frontend teams already using Storybook who want AI agents to help draft or test component stories
  • Developers using Claude Code or Codex who want ready-made Storybook integration

Not for

  • Projects that don't use Storybook
  • Teams needing a hosted/remote MCP server rather than one tied to a local dev server

Required permissions

  • Runs a local HTTP server bound to the Storybook dev server's port (default 6006)
  • Reads component files and existing stories in your project

Risks and side effects

  • The README explicitly states the project is experimental; APIs and architecture may change without notice
  • No authentication is described for the local HTTP endpoint in the source material, so exposing the dev server port beyond localhost could let other local processes reach it

Setup

Before you start

Runtime：Node.js 24+

  1. Add the addon to your Storybook project: npm install --save-dev @storybook/addon-mcp (or pnpm/yarn), then include @storybook/addon-mcp in the addons list of .storybook/main.ts.
  2. Start your Storybook dev server (e.g. pnpm storybook); the MCP server runs alongside it, listening by default at http://localhost:6006/mcp.
  3. In your MCP client (Claude Code, Codex, or another MCP-capable editor), add a streamable-http server pointing at that URL, adjusting the port to match your Storybook instance if it isn't the default.
  4. Alternatively, install the official Claude Code or Codex plugin from the marketplace (e.g. claude plugin marketplace add storybookjs/mcp@main) to have the MCP connection configured automatically.
.mcp.json 
{"mcpServers":{"storybook":{"type":"streamable-http","url":"http://localhost:6006/mcp"}}}

Shown for Claude Code. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json
{
  "servers": {
    "storybook": {
      "type": "streamable-http",
      "url": "http://localhost:6006/mcp"
    }
  }
}

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal
claude mcp add --transport http storybook http://localhost:6006/mcp

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

Start Storybook and connect your client to http://localhost:6006/mcp; list-all-documentation and preview-stories should appear in the tool list, or confirm with a curl POST to /mcp calling tools/list.

Troubleshooting

  1. Confirm the Storybook dev server is running before connecting (e.g. `pnpm storybook` or your project's storybook command)
  2. Use curl to POST a `tools/list` request to `http://localhost:6006/mcp` to confirm the MCP endpoint responds
  3. If not using the default port 6006, check that the client's configured URL and the `--port` argument match your actual Storybook port
  4. Use the bundled MCP Inspector (`pnpm inspect`) or the MCPJam Inspector for lower-level debugging

Things to try

Once connected, you can ask your AI assistant things like:

  • List all component documentation from my Storybook
  • Show me how all the button stories look, using the Storybook MCP
  • Automatically write and test stories for this UI component
  • Run preview-stories again to see how the stories render now

Tools 2

list-all-documentation read-only
Lists all Storybook documentation resources exposed by the server.
preview-stories read-only
Renders a live preview of a component's stories inside the MCP client UI so agents and developers can visually verify the output.

Use cases

Having an AI agent automatically draft new Storybook stories for existing UI components
Validating that newly generated or edited stories render correctly
Querying a project's existing component documentation and stories from within a coding assistant

Supported clients

Claude Code
Codex
VS CodePartial support

Listed from the project's documentation, not tested by this site.

Overview

Storybook MCP Addon (npm package @storybook/addon-mcp) is maintained by storybookjs, the official Storybook GitHub organization. It runs an MCP server as part of your local Storybook dev server, exposing component information and development workflows over streamable-http at http://localhost:6006/mcp (port configurable via a --port argument). This lets AI agents read component documentation, author new stories, and verify how they render. The monorepo also ships companion Claude Code and Codex plugins that auto-configure this MCP server. The README notes the project is experimental and under active development, so APIs and architecture may change.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 62.9k · Tools 2 Compare with this →
Compare with other MCP servers

Source revision 4589b69a0812 Data synced 2026-10-12 Read the FMRS scoring method