| name | storybook-mcp-integration |
| license | MIT |
| compatibility | Claude Code 2.1.220+. Optional: @storybook/addon-mcp (Storybook 10.3+, Vite-based only). |
| description | Reference for the Storybook MCP server itself (@storybook/addon-mcp): 6 tools across 3 toolsets (dev, docs, testing), availability detection, and per-agent toolset filtering. Use when setting up the server or calling these tools directly against components that already exist. For the end-to-end pipeline that turns a mockup into a new component and consumes these tools as one stage, use design-to-code. |
| tags | ["storybook","mcp","component-discovery","story-preview","component-testing","a11y","design-system","react"] |
| context | fork |
| version | 1.0.0 |
| author | OrchestKit |
| user-invocable | false |
| disable-model-invocation | false |
| complexity | medium |
| persuasion-type | guidance |
| targets | [{"library":"storybook","version":">=10.3.0"}] |
| metadata | {"category":"document-asset-creation","mcp-server":"storybook-mcp"} |
| allowed-tools | ["Read","Glob","Grep","WebFetch","WebSearch","ToolSearch"] |
| paths | [".storybook/**","src/**/*.stories.{ts,tsx}"] |
Storybook MCP Integration
Use the Storybook MCP server (@storybook/addon-mcp) to give agents awareness of a project's actual component library — props, stories, tests, and live previews.
When to Use
- Component generation — check existing Storybook components before creating new ones
- Component testing — run story tests + a11y audits via MCP instead of CLI
- Visual verification — embed story previews in chat for user confirmation
- Component auditing — inventory components with full metadata via MCP
Quick Reference — 6 Tools, 3 Toolsets
| Toolset | Tool | Purpose | Key Inputs |
|---|
| dev | get-storybook-story-instructions | Guidance on writing stories + interaction tests | none |
| dev | preview-stories | Returns preview URLs for stories (embeddable) | stories[]: {storyId} or {absoluteStoryPath, exportName} |
| docs | list-all-documentation | Full component + docs manifest index | none |
| docs | get-documentation | Props, first 3 stories, story index, docs | id (required), storybookId (optional) |
| docs | get-documentation-for-story | Full story source + component docs | componentId, storyName (required) |
| testing | run-story-tests | Run component + a11y tests, pass/fail + violations | stories[] (optional), a11y boolean (default true) |
Prerequisites
npx storybook@latest upgrade
npx storybook add @storybook/addon-mcp
npx mcp-add -- http --url --scope project
