Best for
- Frontend teams already using Storybook who want AI agents to help draft or test component stories
- Developers using Claude Code or Codex who want ready-made Storybook integration
S
Storybook MCP Addon
Official
MCP addon that runs inside your Storybook dev server so AI agents can write and test UI component stories.
GitHub source repository ↗
55FMRS · C
An officially maintained (storybookjs) MCP addon that runs inside the Storybook dev server, exposing component data over streamable-http so AI agents can write and validate stories; still experimental and only useful for local Storybook-based projects.
Storybook MCP Addon (npm package @storybook/addon-mcp) is maintained by storybookjs, the official Storybook GitHub organization. It runs an MCP server as part of your local Storybook dev server, exposing component information and development workflows over streamable-http at http://localhost:6006/mcp (port configurable via a --port argument). This lets AI agents read component documentation, author new stories, and verify how they render. The monorepo also ships companion Claude Code and Codex plugins that auto-configure this MCP server. The README notes the project is experimental and under active development, so APIs and architecture may change.
Tools
list-all-documentation
Lists all Storybook documentation resources exposed by the server.
preview-stories
Renders a live preview of a component's stories inside the MCP client UI so agents and developers can visually verify the output.
Setup
- Add the addon to your Storybook project:
npm install --save-dev @storybook/addon-mcp(or pnpm/yarn), then include@storybook/addon-mcpin the addons list of.storybook/main.ts. - Start your Storybook dev server (e.g.
pnpm storybook); the MCP server runs alongside it, listening by default athttp://localhost:6006/mcp. - In your MCP client (Claude Code, Codex, or another MCP-capable editor), add a streamable-http server pointing at that URL, adjusting the port to match your Storybook instance if it isn't the default.
- Alternatively, install the official Claude Code or Codex plugin from the marketplace (e.g.
claude plugin marketplace add storybookjs/mcp@main) to have the MCP connection configured automatically.
claude_desktop_config.json
{"mcpServers":{"storybook":{"type":"streamable-http","url":"http://localhost:6006/mcp"}}}
Fit and risk
Not for
- Projects that don't use Storybook
- Teams needing a hosted/remote MCP server rather than one tied to a local dev server
Required permissions
- Runs a local HTTP server bound to the Storybook dev server's port (default 6006)
- Reads component files and existing stories in your project
Risks and side effects
- The README explicitly states the project is experimental; APIs and architecture may change without notice
- No authentication is described for the local HTTP endpoint in the source material, so exposing the dev server port beyond localhost could let other local processes reach it
Troubleshooting
- Confirm the Storybook dev server is running before connecting (e.g. `pnpm storybook` or your project's storybook command)
- Use curl to POST a `tools/list` request to `http://localhost:6006/mcp` to confirm the MCP endpoint responds
- If not using the default port 6006, check that the client's configured URL and the `--port` argument match your actual Storybook port
- Use the bundled MCP Inspector (`pnpm inspect`) or the MCPJam Inspector for lower-level debugging
Use cases
Having an AI agent automatically draft new Storybook stories for existing UI components
Validating that newly generated or edited stories render correctly
Querying a project's existing component documentation and stories from within a coding assistant
Supported clients
Claude CodeFull support
CodexFull support
VS Code (Insiders)Partial support