Storybook MCP Server

The Storybook MCP Server is an official addon of the Storybook project, maintained by the company Chromatic. It connects the local Storybook development server to AI coding agents over the Model Context Protocol, giving them direct access to a project's existing component library — stories, props documentation, variants, and tests — instead of forcing an agent to guess a component's shape purely from source code. Per the project's own description, this creates a "self-healing loop": an agent can validate newly generated or changed UI, fix issues it finds on its own, and rerun the tests before presenting the result to a human.

The three toolsets

The addon groups its MCP tools into three categories, per the official documentation. The development toolset covers finding and authoring stories and mapping existing components to their variants. The docs toolset returns component documentation and props references, for example via list-all-documentation for a full overview or get-story for the code and metadata of a single story. The testing toolset runs automated interaction and accessibility checks and returns structured results an agent can act on to fix specific issues. In addition, preview-stories opens one or more stories as an interactive preview directly inside the chat window of the connecting client, producing visible feedback without a human having to switch to a browser manually.

Component manifest and framework support

The core of the integration is the so-called component manifest, a structured index of a project's components, stories, and props. It is enabled via the features: { componentsManifest: true } configuration option in .storybook/main.ts. Per the documentation, full manifest support currently covers React-based frameworks as well as @storybook/angular-vite and @storybook/vue3-vite; the original announcement blog post names React projects on Storybook 10.3 and newer as the starting point and states that support for further frameworks is planned later in the year. For older Angular setups and other frameworks not yet fully covered, the development and testing tools still work per the vendor, just without the full manifest depth.

Installation and connecting agents

Setup runs through Storybook's standard installer command, npx storybook add @storybook/addon-mcp, which adds the package to the project and registers it in the Storybook configuration. With the local Storybook dev server running, the MCP server is reachable by default at http://localhost:6006/mcp. To connect a supported client, Storybook additionally offers npx mcp-add --type http --url "http://localhost:6006/mcp", which writes the matching client configuration automatically. Per the vendor, the server works with Claude Code, OpenAI Codex, Cursor, Google Gemini CLI, and VS Code Copilot, among others, and in principle with any MCP-capable client.

How it differs from other tools in the catalog

Unlike generic browser automation tools such as Playwright or Chrome DevTools, which drive and observe a web page from the outside, the Storybook MCP Server knows the structure of the component library itself: which variants of a component already exist as stories, which props they expect, and which interaction or accessibility tests are defined for them. That makes it a specialized tool for frontend teams who deliberately work with Storybook as their component workshop, rather than a general-purpose browser controller.

Cost

The addon itself is part of the MIT-licensed Storybook core project and fully free to use, with no account or subscription required. Chromatic, as Storybook's steward, separately offers its own, partly paid cloud services around visual testing and publishing; these are not required for local use of the MCP addon.

Who the Storybook MCP Server is for

The server suits teams that already work with Storybook and want AI agents to stay closely tied to the existing design language and test coverage while building, maintaining, and testing UI components — for example, automatically generating new stories for freshly built components, reusing existing variants instead of duplicating them, and letting the agent fix failing interaction or accessibility tests directly. Teams without a Storybook instance, or who only need to automate finished web pages in a browser, will find more general-purpose alternatives in the catalog with Playwright and Chrome DevTools.

An existing Storybook project; for full functionality (component manifest) Storybook 10.3 or newer with a React framework, or @storybook/angular-vite or @storybook/vue3-vite; an MCP-capable client (e.g. Claude Code, Codex, Cursor, Gemini CLI, VS Code Copilot).

Run npx storybook add @storybook/addon-mcp in the project directory, then set features: { componentsManifest: true } in .storybook/main.ts. Start the Storybook dev server, then connect the desired client via npx mcp-add --type http --url "http://localhost:6006/mcp" or enter the URL manually in the client configuration.

npx storybook add @storybook/addon-mcp

No built-in authentication; the MCP server runs as part of the local Storybook dev server at localhost:6006/mcp and is reachable only on the local machine by default.

The server needs read access to the project's Storybook source (stories, components, configuration) and the ability to run the built-in interaction and accessibility test runner locally. No permissions beyond the project directory and the running dev server.

Component source code, story definitions, props documentation, and test/preview results are sent to the connected AI agent and its model provider. Since everything runs locally in the dev server, data leaves the project only via that path to the model — not to Chromatic or Storybook itself.

Since the MCP server runs without its own authentication, the Storybook dev server port (default 6006) should not be exposed unprotected to a public network, or third parties on the same network could access component source code and test results. If stories contain real sample data instead of placeholders, that data reaches the connecting agent's model provider; sensitive projects should use only anonymized sample data in stories.