This project provides an MCP (Model Context Protocol) server and associated tools to enable AI agents to interact efficiently with Storybook UI component information and development workflows. It targets developers seeking to integrate AI assistance into their UI development process, offering a standardized way for agents to understand and manipulate Storybook components, thereby enhancing productivity.

How It Works

The project is structured as a monorepo containing several key packages: @storybook/mcp for the standalone MCP server, @storybook/addon-mcp which embeds the server within a Storybook development environment, and proxy/plugin packages (@storybook/mcp-proxy, @storybook/claude-code-plugin, @storybook/codex-plugin) for integrating with specific AI models like Claude and Codex. The addon exposes Storybook's component knowledge via the MCP protocol, allowing AI agents to query information and potentially trigger development actions.

Quick Start & Requirements

• Prerequisites: Node.js 24+, pnpm 10.19.0+.
• Installation: Clone the repository, cd into it, and run pnpm install.
• Development: Use pnpm build to build packages, pnpm dev to start in watch mode, and pnpm test for unit tests. Running pnpm storybook starts an internal Storybook instance with the addon.
• External Plugin Installation:
  • Codex: codex plugin marketplace add storybookjs/mcp --ref main
  • Claude: claude plugin marketplace add storybookjs/mcp@main --scope user
• Documentation: Primarily within individual package READMEs and the main repository.

Highlighted Details

• Monorepo architecture separating core MCP, Storybook integration, proxy, and AI-specific plugins.
• Direct marketplace installation support for Codex and Claude plugins.
• MCP server accessible at http://localhost:6006/mcp when Storybook is running.
• Includes debugging tools like an MCP Inspector (pnpm inspect) and curl examples.
• Integrated quality checks (pnpm check) covering build, test, lint, format, and type checking.

Maintenance & Community

Contributions are welcomed. Help and discussions can be initiated via GitHub Discussions, issues for bug reports, and discussions for ideas/feature requests. Specific community channels like Discord or Slack are not explicitly mentioned.

Licensing & Compatibility

The project is licensed under the MIT license. However, it is explicitly noted as experimental and under active development, meaning APIs and architecture may change, potentially impacting compatibility in future versions.

Limitations & Caveats

This project is experimental and subject to API and architectural changes. It requires specific, recent versions of Node.js (24+) and pnpm (10.19.0+), with strict enforcement of the pnpm package manager.