Storybook MCP: the nine tools and the gates on them

Every MCP directory on page one of "storybook mcp" links the same GitHub repository. That repository was archived on 7 September 2026.

Quick answer: Storybook MCP is official, and it ships as two npm packages. @storybook/addon-mcp runs an MCP server on your Storybook dev server at /mcp, and @storybook/mcp is a library with no CLI that you mount on a server you own. Both are at 10.6.2, published 12 October 2026, MIT licensed. Since 10.6.0 on 2 September 2026 the addon is version-locked to Storybook itself, so addon 10.6.2 requires Storybook 10.6.2, and the standalone storybookjs/mcp repo that every MCP directory still indexes is archived. The addon declares nine tools across three toolsets, but only two of them are unconditional: the other seven appear only if your setup supports them. Storybook's own docs label the whole surface a preview.

What Storybook MCP is for

Storybook's framing is unusually specific about who the server serves. The Storybook Design Systems with Agents RFC, dated 22 September 2025, states: "The MCP server is intended for consumers of the Storybook, not the builders (although they could use it too if they want to)."

That is the whole idea. The team maintaining the component library writes stories. Everyone else, including the coding agent, reads them. Instead of an agent inferring your Button API from the open internet, it asks your running Storybook.

Storybook's own description of the addon package, as published on npm, is "Help agents automatically write and test stories for your UI components." Note the word test. The server is not only a lookup surface.

The two packages, and why that distinction matters

The split is stated in the Storybook tracker. Issue #35673, opened 30 July 2026, begins: "Storybook exposes agent capabilities through two MCP surfaces, @storybook/addon-mcp (dev-server MCP at /mcp) and @storybook/mcp (hosted/static manifests)".

@storybook/addon-mcp is the one almost everybody wants. It mounts an MCP endpoint on the Storybook dev server you already run. First published 27 August 2025 as 0.0.1, now at 10.6.2 published 12 October 2026, MIT, 36 stable releases.

@storybook/mcp is not a server you run. Its README in the monorepo is explicit: "This package is a library: the tarball ships one module and no executable. It declares no bin, starts no process, and has no CLI. You register its tools on an MCP server you own." It first appeared on npm 22 October 2025 and is also at 10.6.2. Prerequisites it lists are Node.js 20 or newer and a manifests source containing components.json (required) and docs.json (optional). Its entry point is createStorybookMcpHandler.

This matters because several MCP directories present the second package as an installable server. It is the layer you reach for when you want agents to query a deployed, static Storybook rather than a dev server on localhost, and it needs you to write the host.

The version story page one has not caught up with

The npm publish history is the cleanest way to see what happened.

Version	Published	What it means
0.0.1	27 Aug 2025	First release, standalone experiment
0.7.0	10 Jul 2026	Last of the 0.x line, peer range still spanned Storybook 9.1.16 through 10.5
10.6.0	2 Sep 2026	Version line merged with Storybook, peer narrowed to ^10.6.0
10.6.1	29 Sep 2026
10.6.2	12 Oct 2026	Current, peer storybook: ^10.6.2

Two consequences follow, and neither is on page one of the SERP.

The addon is now version-locked. Through 0.7.0 the peer dependency accepted ^9.1.16 || ^10.0.0 up to ^10.5.0-0, so you could pin the addon independently. From 10.6.0 the peer is exactly ^10.6.0, and at 10.6.2 it is ^10.6.2. In practice: upgrade the addon, upgrade Storybook, same minor. Storybook's docs page for the MCP server states no version requirement at all, so the npm peer dependency is the only place this is written down.

The standalone repository is archived. storybookjs/mcp was created 21 August 2025, reached 271 stars and 43 forks, last received a push on 7 September 2026, and is now archived. The code moved into the main monorepo at storybookjs/storybook, path code/addons/mcp, alongside the a11y, docs, links, onboarding, pseudo-states, themes and vitest addons.

The directories have not noticed. PulseMCP, at rank 4 on this query, lists "GitHub Repo (270 stars)" pointing at github.com/storybookjs/mcp, shows "Released On Aug 22, 2025", and says nothing about the repository being archived or the package having shipped 36 releases since. The archived repo's README also ranks in its own right at position 10. If you are reading a trust score, a star count or a release date for Storybook MCP from an MCP directory, you are reading data about a repository that stopped moving six weeks ago.

The nine tools, and the seven gates

Storybook documents the tools in three toolsets. The registry source in code/addons/mcp/src/tools/tool-registry.ts shows which of them actually register, and that is the part worth knowing before you promise anyone a capability.

Development toolset (5)

Tool	What it does	Condition
get-storybook-story-instructions	Returns guidance on writing stories	Always
stories-preview	Renders story previews in chat	Always
stories-changed	Lists stories affected by local file changes	Change detection enabled
stories-find-by-component	Maps components to their stories	Module graph supported
review-create	Pushes a curated review with a URL	CLI review enabled, plus a per-request check

Docs toolset (3)

Tool	What it does	Condition
docs-list	Returns the component index	Docs enabled
docs-show	Returns detailed component documentation	Docs enabled
docs-show-story	Returns full story and documentation	Docs enabled

Testing toolset (1)

Tool	What it does	Condition
test-run	Runs tests and accessibility checks	Test support available

So the honest count is two tools guaranteed and seven conditional. The conditions are not arbitrary:

• The docs toolset depends on component manifest support, which Storybook says is unavailable for frameworks that lack it, and Vue 3 needs the experimentalDocgenServer flag.
• test-run depends on test support, which in package terms means @storybook/addon-vitest. It is declared as an optional peer dependency of the addon at ^10.6.2, so installing the MCP addon alone gives you a server with no test tool.
• review-create is gated twice: once on the CLI default, then per request on either an explicit flag or a trusted local-client header. The addon's source names that header X-Storybook-MCP-Proxy and notes it is what Storybook's own CLIs and the Claude and Codex plugins built on them send to identify themselves.

If you wire the server and see fewer tools than an article promised, that is why. Check the gate, not the install.

Setup, exactly

Three steps, from Storybook's docs.

1. Install the addon.

   npx storybook add @storybook/addon-mcp
   

2. Turn on the components manifest in .storybook/main.ts. Without this the useful tools have nothing to read.

   const config: StorybookConfig = {
     framework: '@storybook/your-framework',
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
     features: {
       componentsManifest: true,
     },
   };
   

3. Register the endpoint with your agent. Start the dev server, then point the client at it.

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

The transport is streamable HTTP and the default path is /mcp, set in the addon's source as DEFAULT_MCP_ENDPOINT. The published MCP server manifest declares the URL as http://localhost:{--port}/mcp with 6006 as the default port. If /mcp collides with a route of your own, the addon's README documents an endpoint option taking any pathname:

export default {
  addons: [
    {
      name: '@storybook/addon-mcp',
      options: { endpoint: '/custom-mcp' },
    },
  ],
};

One caveat to carry into any rollout decision, in Storybook's words: "Storybook's AI capabilities are in preview. The API may change in future releases."

What practitioners are actually doing with it

The non-vendor results on this SERP are worth reading because they show the shape of real use.

An r/mcp post, How I automated design implementation from Storybook, opens: "A few months ago, when the AI boom started and MCP emerged as a standard, I thought I'd create a package for working with Storybook." Design implementation, not story authoring, is the job people reach for first.

On r/reactjs, a developer shipped a linting addon on top of it: "Introducing Oversight, my first Storybook addon. It accompanies the Storybook MCP server, which lets you describe a component or layout in plain ..." A linter sitting beside the MCP server is a clear signal that teams do not trust the generated output unchecked, which is the right instinct.

And Storybook itself is still iterating in public. The highest non-AI-Overview result on this query is a LinkedIn post from Storybook's cofounder: "We've been experimenting with MCP here at Storybook and I want to show you a little bit about the progress that we've been making, some of the ..." The AI Overview at rank 1 cites Storybook's official docs and blog, while those docs pages do not themselves rank anywhere in the top 20 organic results. Worth knowing if you are deciding what to trust on this query.

What it fixes, and what it does not

✅ Fixes: component API guessing. The agent reads your real props, slots and story variants instead of inventing a plausible Button. ✅ Fixes: stale story coverage. stories-changed and test-run let the agent find what its edit broke and run the check itself. ✅ Fixes: the review loop, where stories-preview renders the result in chat instead of making you alt-tab.

❌ Does not fix: anything you have no component for. Every tool here is a query, and a query returns what exists. ❌ Does not fix: cross-screen consistency. The spacing between your components, the type scale, the density, the single accent colour, the empty-state rules: none of that is a story the agent can fetch. ❌ Does not fix: the generic look of AI-generated UI, which comes from the gaps between components rather than the components themselves. That pattern is traced in why AI-generated apps all look the same.

This is the same ceiling every design-oriented MCP server hits, and it is worth understanding as a category rather than a Storybook quirk: see design system MCP: what it is, who has one, what it can't do.

The duply workflow

1. Wire @storybook/addon-mcp so the agent imports your real components with the right props.
2. Put the rules that apply between the components in a DESIGN.md the agent reads on every task: tokens, type scale, spacing, radii, elevation, density, and the things it is never allowed to do.
3. Start from a system that already holds together rather than a blank file. The duply library publishes production design systems as DESIGN.md files, including Linear, Stripe and Vercel.
4. Full setup in how to give your AI agent a design system.

FAQ

What is Storybook MCP? An official Model Context Protocol server that gives AI coding agents structured access to your Storybook: the component index, documentation, stories, change detection, and test runs. It ships as @storybook/addon-mcp, which mounts an endpoint on the Storybook dev server at /mcp.

Is Storybook MCP free? Yes. Both @storybook/addon-mcp and @storybook/mcp are MIT licensed and published on npm. Storybook labels the AI capabilities a preview, so the API can change between releases.

What Storybook version do I need for the MCP addon? The matching one. Since 10.6.0 on 2 September 2026 the addon's peer dependency is pinned to the same Storybook minor, so @storybook/addon-mcp@10.6.2 requires storybook@^10.6.2. The 0.x line up to 0.7.0 accepted Storybook 9.1.16 and the 10.0 through 10.5 range. The docs page states no requirement, so npm is the source of truth here.

How do I install Storybook MCP? npx storybook add @storybook/addon-mcp, then set features: { componentsManifest: true } in .storybook/main.ts, then register http://localhost:6006/mcp with your agent, for example with npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project.

How many tools does the Storybook MCP server have? Nine declared across three toolsets: five development, three docs, one testing. Only get-storybook-story-instructions and stories-preview register unconditionally. The others depend on change detection, module graph support, docs availability, test support or the review gate.

Why can't my agent see the Storybook test tool? test-run requires test support, which means @storybook/addon-vitest. It is an optional peer dependency, so a plain addon install leaves the testing toolset empty. Install the Vitest addon at the matching version.

Is the Storybook MCP GitHub repo still maintained? The standalone storybookjs/mcp repository is archived, last pushed 7 September 2026 at 271 stars. Development moved into the main monorepo at storybookjs/storybook under code/addons/mcp. MCP directories that quote a star count or a 2025 release date are describing the archived repo.

What is the difference between @storybook/addon-mcp and @storybook/mcp? The addon runs a server for you on the dev server at /mcp. The second package is a library with no executable and no CLI: you call createStorybookMcpHandler on a server you own, pointed at components.json and optionally docs.json, which is the path for serving a deployed static Storybook to agents.

Does Storybook MCP replace a design system? No. It serves the components you have already built. It says nothing about the spacing, type scale, density or accent rules that govern a screen before any component is chosen, which is what a DESIGN.md is for.

Summary

• Storybook MCP is official and current: @storybook/addon-mcp and @storybook/mcp, both 10.6.2, published 12 October 2026, MIT
• Since 10.6.0 on 2 September 2026 the addon is version-locked to the matching Storybook minor, and the docs do not say so, only npm does
• The standalone storybookjs/mcp repo is archived; the code lives at code/addons/mcp in the main monorepo
• Nine tools across three toolsets, but only two register unconditionally and seven sit behind availability gates
• features.componentsManifest: true is the step that makes the useful tools work; test-run additionally needs @storybook/addon-vitest
• Storybook calls the whole AI surface a preview and reserves the right to change the API
• It fixes component API guessing and fixes nothing about the space between components, which is where generic AI UI comes from

Give your agent the components and the rules. Start with the duply library.

Related reading

• Design system MCP: what it is, who has one, what it can't do
• Figma MCP: 35 tools, the real limits, the missing layer
• What is a DESIGN.md file?
• How to give your AI agent a design system