Storybook MCP
Let Claude read your component docs, write stories and run component tests.
Officialby StorybookRuns on your computerChecked October 18, 2026
The Storybook MCP addon runs an MCP server inside your Storybook dev server, so Claude can look up documented components and their props, write and preview stories, and run component tests on its own work. It is still in preview, and the docs tools need a components manifest, which React setups and the Vite builds for Angular and Vue can generate.
Who it is for
- Front-end teams with a component library
- Design system maintainers
- Developers who want AI-written UI code to reuse existing components
Prompts to try
Once it is connected, ask in plain words. Claude decides when to use the server and asks before it changes anything important.
List all documented components in our Storybook and tell me which ones have no stories.Build a pricing card using only components documented in Storybook, then write a story for it.Run the Storybook tests for the Button component and fix any failures.How to connect it
In Claude Code
claude mcp add --transport http storybook http://localhost:6006/mcp
In the Claude desktop app
Not documented
Good to know
Add the addon first with npx storybook add @storybook/addon-mcp and keep Storybook running; your port may differ from 6006.
Unlock the setup steps
Free. Leave your email once to open the setup steps for all 150 servers, and get the best new connectors each month.
How we checked it
Checked Storybook's MCP docs (marked preview), the addon's folder in the storybookjs/storybook repo (last commit 2026-10-14, the old storybookjs/mcp repo is archived and points there) and the npm package @storybook/addon-mcp (10.6.2, about 2.5 million weekly downloads).