@storybook/mcp

What it does

Storybook MCP is an MCP server that exposes your component library's stories and documentation to AI agents. Install it standalone or run it as an addon within your Storybook dev server to give Claude, VS Code, and other agents direct access to your component definitions, variants, and metadata. Rather than relying on static documentation, agents query your live component system in real time—enabling component-aware code generation, interactive component exploration, and design-system-informed AI workflows.

Who it's for

Frontend engineers managing component libraries and design systems with Storybook. Teams using Claude Code or other AI agents in their development environment who want those agents to understand and reference live components instead of external docs.

Common use cases

• Query component stories, variants, and props from Claude Code during development
• Retrieve component documentation and metadata without leaving your editor
• Generate component code using live component context instead of outdated documentation
• Preview and explore your full component library with an AI agent

Setup pitfalls

• The scanner identified 5 hardcoded secrets in the codebase—audit before using in shared or production environments.
• Requires Node.js 24+ and pnpm 10.19.0+ with strict enforcement. Installation will fail with npm, yarn, or older versions.
• The addon requires a live Storybook dev server running (typically on port 6006).
• Reads and writes your filesystem—review the permissions and paths it accesses in your environment.