Set up the Storybook MCP server

The Storybook MCP Server runs as an addon inside an existing Storybook project. This guide covers everything from installation to a first connection with an AI client.

Prerequisites

You need an already set up Storybook project. For full functionality including the component manifest, Storybook 10.3 or newer with a React framework, or @storybook/angular-vite or @storybook/vue3-vite, is required; with older setups the development and testing tools still work per the vendor, just without the full manifest depth.

Installation

Run Storybook's official installer command in the project directory:

npx storybook add @storybook/addon-mcp

The command installs the package and registers it in the Storybook configuration automatically.

Enabling the component manifest

Open .storybook/main.ts and enable the feature flag:

export default {
  features: {
    componentsManifest: true,
  },
};

The manifest is the structured foundation the agent uses to find components, stories, and props without having to search through the entire source tree.

Starting Storybook and connecting the MCP server

Start your usual Storybook dev server, for example with npm run storybook. The MCP server is then reachable by default at http://localhost:6006/mcp. To connect a client, Storybook offers a helper command:

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

The command registers the matching configuration automatically for the chosen client. Alternatively, enter the URL manually in the respective MCP client configuration, for example in Claude Code, Cursor, Codex, Gemini CLI, or VS Code Copilot.

First steps with the agent

Once connected, an agent can, for example, call list-all-documentation for an overview of all documented components, or get-story for the code and metadata of a single story. preview-stories opens one or more stories directly as an interactive preview in the chat window — useful for getting visual feedback without switching to a browser manually. For new components, it helps to have the agent look for existing stories with the development tools first, rather than duplicating variants.

Running tests and letting the agent fix them

The testing tools run interaction and accessibility tests for selected stories and return structured results. If you explicitly ask the agent to fix failing tests, it can change code and rerun the tests until they pass — the "self-healing loop" described by the project.

Common pitfalls

With the component manifest left disabled, the agent can only find components in a limited way and has to rely more heavily on reading raw source code. With no Storybook dev server running, nothing is reachable at localhost:6006/mcp — the server exists only while the dev server is active. Older Angular projects without @storybook/angular-vite still get the basic integration, just without the full manifest depth; check the official frameworks compatibility list in that case. Since the server runs without its own authentication, the dev server port should not be exposed unprotected to the outside.