@storybook/mcp

What it does

This MCP server exposes your Storybook stories and component documentation to AI agents like Claude and Codex. It runs either as a standalone Node.js server or as an addon integrated directly into your Storybook dev server, making component knowledge available to AI-assisted development workflows. Agents can query component documentation, stories, and metadata to generate code, answer questions about your component library, and maintain consistency with existing implementations.

Who it's for

Frontend developers and component library maintainers who use Storybook to document UI components and want AI agents to understand their component APIs and usage patterns. Design systems teams and larger codebases benefit most, where component knowledge is already centralized in Storybook but unavailable to AI coding assistants.

Common use cases

• Query component APIs and design documentation from Claude Code while writing features.
• Generate component code with AI assistance that aligns with your design system.
• Ask Claude to explain component variations based on existing Storybook stories.
• Integrate Storybook knowledge into documentation generation and component discovery workflows.
• Debug component behavior by providing AI agents with story context and props.

Setup pitfalls

• Node.js and pnpm version strict: Requires Node.js 24 or higher and pnpm 10.19.0+; older versions will fail during installation.
• High risk classification: This server is marked high-risk; review the code and dependencies before deploying in production or against sensitive codebases.
• Secrets detected: Scanner found 5 secrets in the repository — audit environment variables and code paths before use, especially if connecting to private components or APIs.
• Port binding: Standalone server uses port 13316; addon uses your Storybook port (default 6006). Ensure no conflicts or firewalls block these ports.