Storybook Mcp

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

Testing the Claude and Codex plugins from GitHub

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

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

codex plugin marketplace list codex plugin list --marketplace storybook

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

claude plugin list --json claude mcp list

The repository intentionally keeps marketplace catalogs in two places. The root catalogs support GitHub installs fromstorybookjs/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.

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

# Use the correct Node version nvm use # Install pnpm if you don't have it npm install -g pnpm@10.19.0

# 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

# 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 internal test Storybook instance onhttp://localhost:6006
- The addon in watch mode, so changes are reflected automatically
- MCP server available athttp://localhost:6006/mcp

Theturbo watch buildcommand 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

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

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.jsonto connect to your local MCP servers.

Alternatively, you can also use thesecurlcomamnds 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": {} }' # test a specific tool call curl -X POST http://localhost:13316/mcp \ -H "Content-Type: application/json" \ -d '{ "jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": { "name": "list-all-documentation", "arguments": {} } }'

This will build everything and start up Storybook with addon-mcp, and you can then connect your coding agent to it athttp://localhost:6006/mcp(or your configured addon endpoint) and try it out.

Show me how all the button stories look, using the Storybook MCP
- After this first prompt, whenever you make changes, Storybook automatically restarts. Wait for it to be fully ready, then you can prompt"Run the tool again".

# Format all files with Prettier pnpm format # Check formatting without changing files pnpm format:check # Lint code with oxlint pnpm lint # Lint with GitHub Actions format (for CI) pnpm lint:ci # Check package exports with publint pnpm publint

The monorepo includes several quality checks that run in CI:

# Run all checks (build, test, lint, format, typecheck, publint) pnpm check # Run checks in watch mode (experimental) pnpm check:watch # Type checking (uses tsc directly, not turbo) pnpm typecheck # Type checking with turbo (for individual packages) pnpm turbo:typecheck # Testing with turbo (for individual packages) pnpm turbo:test

Always include file extensionsin relative imports:

// ✅ Correct import { foo } from './bar.ts'; // ❌ Wrong import { foo } from './bar';

- JSON importsuse the import attributes syntax:

import pkg from '../package.json' with { type: 'json' };

# 1. Create a changeset describing your changes pnpm changeset

When you create a PR, add a changeset if your changes should trigger a release:

- Patch: Bug fixes, documentation updates
- Minor: New features, backward-compatible changes
- Major: Breaking changes

We welcome contributions! Here's how to get started:
- Fork the repositoryand create a feature branch
- Make your changesfollowing the code conventions above
- Test your changesusing the internal Storybook instance
- Create a changesetif your changes warrant a release
- Submit a pull requestwith a clear description

- Code builds without errors (pnpm build)
- Tests pass (pnpm test:run)
- Code is formatted (pnpm format)
- Code is linted (pnpm lint)
- Type checking passes (pnpm typecheck)
- Changes tested with MCP inspector or internal Storybook
- Changeset created if necessary (pnpm changeset)

Note: This project is experimental and under active development. APIs and architecture may change as we explore the best ways to integrate AI agents with Storybook.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Six read-only decision tools for coding agents to assess GitHub bounties, audit agent instructions, diagnose GitHub Actions failures and flakes, and detect MCP tool drift. Remote Streamable HTTP

AI-Safe Code Analysis with 113+ MCP tools for guard validation, memory, workflow, and testing.

fable-discipline is a Claude Code plugin that makes agentic software work follow repeatable working patterns: design before code, verify after edits, separate author from reviewer, preserve verified state between sessions, and report uncertainty honestly.

MCP server that generates production-grade engineering standards (SOLID, testing, architecture, CI/CD) for AI coding assistants

Execute JavaScript code in a modern runtime environment with support for various built-in modules.

Provides a secure JavaScript execution environment for running code snippets.

A server for JavaScript/TypeScript development with intelligent project tooling and testing capabilities.

Execute code securely in isolated sandbox environments using the E2B API.

A powerful Model Context Protocol (MCP) server that supercharges your Python development workflow with AI-powered code review, intelligent test generation, and comprehensive test execution.