storybookjs/mcp

> 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)
Verify the marketplace and plugin:
Claude Code (more details)
Verify the plugin and MCP server:
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)
Installation
Development Workflow
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:
Building
Testing
The monorepo uses a centralized Vitest configuration at the root level with projects configured for each package:
Debugging MCP Servers
Use the MCP Inspector to debug and test MCP server functionality:
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:
Debugging with Storybook
You can start Storybook with:
This will build everything and start up Storybook with addon-mcp, and you can then connect your coding agent to it at http://localhost:6006/mcp (or your configured addon endpoint) and try it out.
Working with the MCP App
To work with and debug the MCP app that is rendered as part of the preview-stories tool, you can:
1. Use the Insiders build of VSCode