Storybook MCP Addon MCP server

[!TIP]

This repository has moved to storybookjs/storybook as of Storybook v10.6.0. Please check there for updated documentation.

Storybook MCP

Welcome to the Storybook MCP Addon monorepo! This project enables AI agents to work more efficiently with Storybook by providing an MCP (Model Context Protocol) server that exposes UI component information and development workflows.

📦 Packages

This monorepo contains four main packages:

• @storybook/mcp - Standalone MCP library for serving Storybook component knowledge (can be used independently)
• @storybook/addon-mcp - Storybook addon that runs an MCP server within your Storybook dev server, and includes the functionality of @storybook/mcp from your local Storybook
• @storybook/claude-code-plugin - Claude Code plugin with Storybook setup skills and MCP configuration
• @storybook/codex-plugin - Codex plugin with Storybook setup skills and MCP configuration

Each package has its own README with user-facing documentation. This document is for contributors looking to develop, test, or contribute to these packages.

🚀 Quick Start

Testing the Claude and Codex plugins from GitHub

External testers can install the plugin marketplace directly from this repository's main branch. No local clone is required.

Codex (more details)

codex plugin marketplace add storybookjs/mcp --ref main
codex plugin add storybook@storybook

Verify the marketplace and plugin:

codex plugin marketplace list
codex plugin list --marketplace storybook

Claude Code (more details)

claude plugin marketplace add storybookjs/mcp@main --scope user
claude plugin install storybook@storybook --scope user

Verify the plugin and MCP server:

claude plugin list --json
claude mcp list

The repository intentionally keeps marketplace catalogs in two places. The root catalogs support GitHub installs from storybookjs/mcp; the package-local catalogs support local package development scripts. They should stay identical except for the relative plugin source path, and the package validation checks that they do.

Prerequisites

• Node.js 24+ - The project requires Node.js 24 or higher (see .nvmrc)
• pnpm 10.19.0+ - Strict package manager requirement (enforced in package.json)

# Use the correct Node version
nvm use

# Install pnpm if you don't have it
npm install -g pnpm@10.19.0

Installation

# Clone the repository
git clone https://github.com/storybookjs/mcp.git
cd addon-mcp

# Install all dependencies (for all packages in the monorepo)
pnpm install

Development Workflow

# Build all packages
pnpm build

# Start development mode (watches for changes in all packages)
pnpm dev

# Run unit tests in watch mode
pnpm test

# Run unit tests once
pnpm test:run

# Run Storybook with the addon for testing
pnpm --filter internal-storybook storybook

The Storybook command starts:

• The internal test Storybook instance on http://localhost:6006
• The addon in watch mode, so changes are reflected automatically
• MCP server available at http://localhost:6006/mcp

🛠️ Common Tasks

Development

The turbo watch build command runs all packages in watch mode, automatically rebuilding when you make changes:

# Start development mode for all packages
pnpm turbo watch build

# This is usually all you need - starts Storybook AND watches addon for changes
pnpm storybook

Building

# Build all packages
pnpm build

Testing

The monorepo uses a centralized Vitest configuration at the root level with projects configured for each package:

# Watch tests across all packages
pnpm test

Shortened. The full README is on GitHub.