Storybook MCP Server

Storybook MCP is the official Model Context Protocol integration from the Storybook team. It connects AI coding agents to your Storybook instance so they can look up real component APIs, generate matching stories, preview UI variants, and run interaction and accessibility tests before claiming a task is done. The goal is to stop agents from guessing component props and instead ground their output in your actual component library.

The integration ships in two flavors. @storybook/addon-mcp runs an MCP server inside your Storybook dev server (typically at http://localhost:6006/mcp), and @storybook/mcp is a standalone library for serving Storybook component knowledge in custom deployments. The server exposes three toolsets: a Docs toolset for indexing and reading component documentation, a Development toolset for writing and previewing stories, and a Testing toolset for executing story tests including accessibility checks.

The project is currently in preview and supports React projects on Storybook 10.4 or later. Support for Vue, Angular, Web Components, and Svelte is planned. Any MCP-compatible agent works, including Claude, Cursor, Gemini, and Microsoft Copilot.

Tools

Prerequisites

• React project (Vue, Angular, Web Components, Svelte support planned)
• Storybook 10.4 or later
• Node.js 20+
• An MCP-compatible agent (Claude, Cursor, Gemini, Copilot, etc.)

Install the addon

From your Storybook project root:

npx storybook add @storybook/addon-mcp

Once Storybook is running, the MCP server is available at http://localhost:6006/mcp (port may vary if you run Storybook on a different port).

Register the server with your agent

The recommended flow uses the mcp-add helper to register the HTTP MCP endpoint at the project scope:

npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project

You will be prompted to name the server (for example, my-project-sb-mcp). That name is how your agent will reference the tools.

For clients that take a raw config JSON, an HTTP MCP entry looks like:

{
  "mcpServers": {
    "my-project-sb-mcp": {
      "type": "http",
      "url": "http://localhost:6006/mcp"
    }
  }
}

Agent instructions

Create an AGENTS.md or CLAUDE.md in your project telling the agent to always consult Storybook before writing UI code. For example:

"When working on UI components, always use the my-project-sb-mcp MCP tools to access Storybook's component and documentation knowledge before answering or taking any action. Never assume component props. Run story tests to validate your work."

• Ground agent-generated UI code in real component APIs by querying list-all-documentation and get-documentation before writing JSX
• Auto-generate Storybook stories for new components following the project's existing conventions via get-storybook-story-instructions
• Preview specific component states (e.g. "Button in dark mode, loading variant") in chat using preview-stories
• Validate AI-written components by running interaction and accessibility tests with run-story-tests and self-heal on failures
• Onboard agents to an unfamiliar design system by letting them browse the component index before suggesting code

• "List every component in our Storybook and tell me which ones we already have for forms."
• "Look up our Button component in Storybook, then build a new IconButton story that matches the same prop conventions."
• "Preview the Card component's loading and error stories side by side."
• "Generate a story for the new Modal component, then run the story tests and fix any accessibility violations."
• "Before writing this page, check Storybook for any existing Layout components I should reuse."

• Officially maintained by the Storybook team, so it tracks Storybook releases directly
• Combines documentation lookup, story generation, preview, and testing in one server, which is the full agent loop for UI work
• Runs locally inside your existing Storybook dev server with no extra credentials or hosting
• Works with any MCP-compatible client (Claude, Cursor, Gemini, Copilot)

• In preview. Only React projects are supported today; Vue, Angular, Svelte, and Web Components are on the roadmap
• Requires Storybook 10.4 or later, so older Storybook setups need to upgrade first
• The dev server must be running for the MCP endpoint to be reachable; not suitable for headless CI agents out of the box

• Chromatic for hosted Storybook review and visual testing (not an MCP server, but related workflow)
• Community Figma MCP servers for grounding agents in design tokens instead of code
• Building a custom MCP server on top of @storybook/mcp (the standalone library) for non-React or custom-hosted setups