{
  "markdown": "> [!TIP]\n> This repository has moved to [storybookjs/storybook](https://github.com/storybookjs/storybook) as of Storybook v10.6.0. Please check there for updated documentation.\n\n---\n\n# Storybook MCP\n\nWelcome 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.\n\n## 📦 Packages\n\nThis monorepo contains four main packages:\n\n- **[@storybook/mcp](./packages/mcp)** - Standalone MCP library for serving Storybook component knowledge (can be used independently)\n- **[@storybook/addon-mcp](./packages/addon-mcp)** - Storybook addon that runs an MCP server within your Storybook dev server, and includes the functionality of **[@storybook/mcp](./packages/mcp)** from your local Storybook\n- **[@storybook/claude-code-plugin](./packages/claude-plugin)** - Claude Code plugin with Storybook setup skills and MCP configuration\n- **[@storybook/codex-plugin](./packages/codex-plugin)** - Codex plugin with Storybook setup skills and MCP configuration\n\nEach package has its own README with user-facing documentation. This document is for **contributors** looking to develop, test, or contribute to these packages.\n\n## 🚀 Quick Start\n\n### Testing the Claude and Codex plugins from GitHub\n\nExternal testers can install the plugin marketplace directly from this repository's\n`main` branch. No local clone is required.\n\n#### Codex ([more details](./packages/codex-plugin))\n\n```bash\ncodex plugin marketplace add storybookjs/mcp --ref main\ncodex plugin add storybook@storybook\n```\n\nVerify the marketplace and plugin:\n\n```bash\ncodex plugin marketplace list\ncodex plugin list --marketplace storybook\n```\n\n#### Claude Code ([more details](./packages/claude-plugin))\n\n```bash\nclaude plugin marketplace add storybookjs/mcp@main --scope user\nclaude plugin install storybook@storybook --scope user\n```\n\nVerify the plugin and MCP server:\n\n```bash\nclaude plugin list --json\nclaude mcp list\n```\n\nThe repository intentionally keeps marketplace catalogs in two places. The root\ncatalogs support GitHub installs from `storybookjs/mcp`; the package-local\ncatalogs support local package development scripts. They should stay identical\nexcept for the relative plugin source path, and the package validation checks\nthat they do.\n\n### Prerequisites\n\n- **Node.js 24+** - The project requires Node.js 24 or higher (see `.nvmrc`)\n- **pnpm 10.19.0+** - Strict package manager requirement (enforced in `package.json`)\n\n```bash\n# Use the correct Node version\nnvm use\n\n# Install pnpm if you don't have it\nnpm install -g pnpm@10.19.0\n```\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/storybookjs/mcp.git\ncd addon-mcp\n\n# Install all dependencies (for all packages in the monorepo)\npnpm install\n```\n\n### Development Workflow\n\n```bash\n# Build all packages\npnpm build\n\n# Start development mode (watches for changes in all packages)\npnpm dev\n\n# Run unit tests in watch mode\npnpm test\n\n# Run unit tests once\npnpm test:run\n\n# Run Storybook with the addon for testing\npnpm --filter internal-storybook storybook\n```\n\nThe Storybook command starts:\n\n- The internal test Storybook instance on `http://localhost:6006`\n- The addon in watch mode, so changes are reflected automatically\n- MCP server available at `http://localhost:6006/mcp`\n\n## 🛠️ Common Tasks\n\n### Development\n\nThe `turbo watch build` command runs all packages in watch mode, automatically rebuilding when you make changes:\n\n```bash\n# Start development mode for all packages\npnpm turbo watch build\n```\n\n```bash\n# This is usually all you need - starts Storybook AND watches addon for changes\npnpm storybook\n```\n\n### Building\n\n```bash\n# Build all packages\npnpm build\n```\n\n### Testing\n\nThe monorepo uses a centralized Vitest configuration at the root level with projects configured for each package:\n\n```bash\n# Watch tests across all packages\npnpm test\n\n# Run tests once across all packages\npnpm test:run\n\n# Run tests with coverage and CI reporters\npnpm test:ci\n```\n\n### Debugging MCP Servers\n\nUse the MCP Inspector to debug and test MCP server functionality:\n\n```bash\n# Launches the MCP inspector (requires Storybook to be running)\npnpm inspect\n```\n\nThis uses the configuration in `.mcp.inspect.json` to connect to your local MCP servers.\n\nAlternatively, you can also use these `curl` comamnds to check that everything works:\n\n```bash\n# test that the mcp server is running\n# use port 6006 to test the addon-mcp server instead\ncurl -X POST \\\n  http://localhost:13316/mcp      \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\n    \"jsonrpc\": \"2.0\",\n    \"id\": 1,\n    \"method\": \"tools/list\",\n    \"params\": {}\n  }'\n\n# test a specific tool call\ncurl -X POST http://localhost:13316/mcp \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\n    \"jsonrpc\": \"2.0\",\n    \"id\": 2,\n    \"method\": \"tools/call\",\n    \"params\": {\n      \"name\": \"list-all-documentation\",\n      \"arguments\": {}\n    }\n  }'\n```\n\n### Debugging with Storybook\n\nYou can start Storybook with:\n\n```bash\npnpm storybook\n```\n\nThis 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.\n\n### Working with the MCP App\n\nTo work with and debug the MCP app that is rendered as part of the preview-stories tool, you can:\n\n1. Use the Insiders build of VSCode\n2. Ensure the [chat.mcp.apps.enabled](vscode-insiders://settings/chat.mcp.apps.enabled) setting is enabled\n3. Start up the repo's Storybook in watch mode by running `pnpm storybook` in the root\n4. Restart VSCode and, open the [`.vscode/mcp.json`](./.vscode/mcp.json) file and ensure the Storybook MCP is marked as Running, otherwise click Start.\n5. Open up a chat in VSCode and write a prompt like this:\n\n> Show me how all the button stories look, using the Storybook MCP\n\n6. 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\"_.\n\nYou can also use [the inspector from MCPJam](https://docs.mcpjam.com/getting-started) to have more low level control of the tool calls.\n\n### Formatting & Linting\n\n```bash\n# Format all files with Prettier\npnpm format\n\n# Check formatting without changing files\npnpm format:check\n\n# Lint code with oxlint\npnpm lint\n\n# Lint with GitHub Actions format (for CI)\npnpm lint:ci\n\n# Check package exports with publint\npnpm publint\n```\n\n## 🔍 Quality Checks\n\nThe monorepo includes several quality checks that run in CI:\n\n```bash\n# Run all checks (build, test, lint, format, typecheck, publint)\npnpm check\n\n# Run checks in watch mode (experimental)\npnpm check:watch\n\n# Type checking (uses tsc directly, not turbo)\npnpm typecheck\n\n# Type checking with turbo (for individual packages)\npnpm turbo:typecheck\n\n# Testing with turbo (for individual packages)\npnpm turbo:test\n```\n\n## 📝 Code Conventions\n\n### TypeScript & Imports\n\n**Always include file extensions** in relative imports:\n\n```typescript\n// ✅ Correct\nimport { foo } from './bar.ts';\n\n// ❌ Wrong\nimport { foo } from './bar';\n```\n\n- **JSON imports** use the import attributes syntax:\n\n```typescript\nimport pkg from '../package.json' with { type: 'json' };\n```\n\n## 🚢 Release Process\n\nThis project uses [Changesets](https://github.com/changesets/changesets) for version management:\n\n```bash\n# 1. Create a changeset describing your changes\npnpm changeset\n```\n\nWhen you create a PR, add a changeset if your changes should trigger a release:\n\n- Patch: Bug fixes, documentation updates\n- Minor: New features, backward-compatible changes\n- Major: Breaking changes\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how to get started:\n\n1. **Fork the repository** and create a feature branch\n2. **Make your changes** following the code conventions above\n3. **Test your changes** using the internal Storybook instance\n4. **Create a changeset** if your changes warrant a release\n5. **Submit a pull request** with a clear description\n\n### Before Submitting\n\n- [ ] Code builds without errors (`pnpm build`)\n- [ ] Tests pass (`pnpm test:run`)\n- [ ] Code is formatted (`pnpm format`)\n- [ ] Code is linted (`pnpm lint`)\n- [ ] Type checking passes (`pnpm typecheck`)\n- [ ] Changes tested with MCP inspector or internal Storybook\n- [ ] Changeset created if necessary (`pnpm changeset`)\n\n### Getting Help\n\n- **Ideas & Feature Requests**: [Start a discussion](https://github.com/storybookjs/mcp/discussions/new?category=ideas)\n- **Bug Reports**: [Open an issue](https://github.com/storybookjs/mcp/issues/new)\n- **Questions**: Ask in [GitHub Discussions](https://github.com/storybookjs/mcp/discussions)\n\n## 📄 License\n\nMIT - See [LICENSE](./LICENSE) for details\n\n---\n\n**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.\n",
  "bytes": 8948,
  "sha": "a9f66a33919ca53b269fa3c10f7e1b8ce818df98880535d0e3eac692b2c02466",
  "repo_slug": "storybookjs/mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_storybookjs_addon_mcp_a56b1365/readme"
}