storybook

Storybook MCP - Contributor Guide

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 five 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/mcp-proxy - Stable MCP proxy package for Storybook agent integrations
• @storybook/claude-code-plugin - Claude Code plugin with Storybook setup skills and MCP configuration that starts @storybook/mcp-proxy
• @storybook/codex-plugin - Codex plugin with Storybook setup skills and MCP configuration that starts @storybook/mcp-proxy

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

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

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

claude mcp list should show plugin:storybook:storybook using the @storybook/mcp-proxy preview URL from pkg.pr.new.

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 [email protected]

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

# Run tests once across all packages
pnpm test:run

# Run tests with coverage and CI reporters
pnpm test:ci

Debugging MCP Servers

Use the MCP Inspector to debug and test MCP server functionality:

# Launches the MCP inspector (requires Storybook to be running)
pnpm inspect

This uses the configuration in .mcp.inspect.json to connect to your local MCP servers.

Alternatively, you can also use these curl comamnds to check that everything works:

# test that the mcp server is running
# use port 6006 to test the addon-mcp server instead
curl -X POST \
  http://localhost:13316/mcp      \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list",
    "params": {}
  }'