@storybook/mcp

What it does

Provides an MCP server that indexes and exposes your Storybook stories and component documentation to AI agents like Claude Code. The server reads your Storybook configuration and component files to build a queryable knowledge base of available components, their stories, variations, and related documentation. This allows Claude to understand your component library's structure and help you write component code with full context of existing implementations. Can run as a standalone server or integrated as a Storybook addon that exposes components via a dev server endpoint.

Who it's for

Frontend engineers and component library maintainers using Storybook who want Claude Code (or Codex agents) to understand their component ecosystem. Particularly useful for teams building design systems or component libraries where consistency across implementations matters.

Common use cases

• Query a component's available stories and variations directly from Claude Code
• Reference existing component implementations and patterns when building new features
• Generate or improve component documentation based on live Storybook stories
• Debug component behavior by accessing Storybook context and related stories

Setup pitfalls

• The scanner found 5 secrets in the repository — audit your own setup to avoid committing credentials to version control
• Requires Node.js 24+ and pnpm 10.19.0+ (strictly enforced; earlier versions will fail the install)
• Needs read and write access to your .storybook/ config directory and component source files
• When using the addon variant, requires a running Storybook dev server; network latency or dev server crashes will block agent requests