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
# Storybook 10.3+ with Vite builder (no webpack)
npx storybook@latest upgrade
# Install the addon (current: @storybook/addon-mcp@0.6.0, Apr 2026)
npx storybook add @storybook/addon-mcp
# Enable docs toolset (required for component discovery)
# In .storybook/main.ts:
# componentsManifest: true
# NOTE: the old `experimentalComponentsManifest` flag was renamed in
# Storybook 10.3; it is now `componentsManifest` and default-on. Any
# code still passing the `experimental` prefix will warn-then-ignore.
# For Chromatic remote setups, use the standalone package instead of
# the addon (same tool surface, no local Storybook required):
# npm i -D @storybook/mcp
# npx storybook-mcp --registry https://chromatic.storybook.cloud
# Enable testing toolset (requires addon-vitest)
# npx storybook add @storybook/addon-vitest
# Register with Claude Code
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project
Detection Pattern
Before using Storybook MCP tools, check availability:
# Probe for storybook-mcp tools
ToolSearch(query="+storybook list-all-documentation")
# If tools found → Storybook MCP is available
# If not found → fallback to filesystem-based component discovery
Rule Details
Load rules on demand with Read("rules/<file>"):
| Rule |
Impact |
Description |
component-discovery |
HIGH |
Use list-all-documentation + get-documentation before generating new components |
story-preview-verification |
HIGH |
Embed preview-stories URLs for visual confirmation |
mcp-test-runner |
CRITICAL |
Run run-story-tests with a11y:true after component generation |
Toolset Selection
Filter toolsets via X-MCP-Toolsets header to reduce agent context:
| Agent Role |
Toolsets |
Rationale |
| component-curator |
docs |
Inventory + props only, no testing |
| frontend-ui-developer |
dev,docs,testing |
Full access for gen → verify loop |
| design-system-architect |
docs |
Component metadata for governance |
Chromatic Remote Publishing
For teams using Chromatic, the docs toolset is publishable remotely:
- Published at
https://<chromatic-storybook-url>/mcp
- Only docs toolset available remotely (dev + testing need local Storybook)
- Useful for cross-team design system discovery without running Storybook locally
Graceful Degradation
| Storybook MCP |
Fallback |
Behavior |
| Available |
— |
Use MCP tools for component discovery, testing, previews |
| Unavailable |
Filesystem |
Glob("**/components/**/*.tsx") + Grep for component inventory |
| Unavailable |
21st.dev |
Search public registry via 21st-dev-magic MCP |
| Unavailable |
Manual |
Claude multimodal analysis of screenshots |
Related Skills
storybook-testing — CSF3 patterns, Vitest integration, Chromatic TurboSnapcomponent-search — 21st.dev registry search (external components)design-to-code — Full mockup-to-component pipeline (uses this skill in Stage 2)ui-components — shadcn/ui + Radix component patterns
1---2name: storybook-mcp-integration3description: 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.4license: MIT5---6
7# Storybook MCP Integration
8
9Use the Storybook MCP server (`@storybook/addon-mcp`) to give agents awareness of a project's actual component library — props, stories, tests, and live previews.
10
11## When to Use
12
13- **Component generation** — check existing Storybook components before creating new ones
14- **Component testing** — run story tests + a11y audits via MCP instead of CLI
15- **Visual verification** — embed story previews in chat for user confirmation
16- **Component auditing** — inventory components with full metadata via MCP
17
18## Quick Reference — 6 Tools, 3 Toolsets
19
20| Toolset | Tool | Purpose | Key Inputs |
21|---------|------|---------|------------|
22| **dev** | `get-storybook-story-instructions` | Guidance on writing stories + interaction tests | none |
23| **dev** | `preview-stories` | Returns preview URLs for stories (embeddable) | `stories[]: {storyId}` or `{absoluteStoryPath, exportName}` |
24| **docs** | `list-all-documentation` | Full component + docs manifest index | none |
25| **docs** | `get-documentation` | Props, first 3 stories, story index, docs | `id` (required), `storybookId` (optional) |
26| **docs** | `get-documentation-for-story` | Full story source + component docs | `componentId`, `storyName` (required) |
27| **testing** | `run-story-tests` | Run component + a11y tests, pass/fail + violations | `stories[]` (optional), `a11y` boolean (default true) |
28
29## Prerequisites
30
31```bash
32# Storybook 10.3+ with Vite builder (no webpack)
33npx storybook@latest upgrade
34
35# Install the addon (current: @storybook/addon-mcp@0.6.0, Apr 2026)
36npx storybook add @storybook/addon-mcp
37
38# Enable docs toolset (required for component discovery)
39# In .storybook/main.ts:
40# componentsManifest: true
41# NOTE: the old `experimentalComponentsManifest` flag was renamed in
42# Storybook 10.3; it is now `componentsManifest` and default-on. Any
43# code still passing the `experimental` prefix will warn-then-ignore.
44
45# For Chromatic remote setups, use the standalone package instead of
46# the addon (same tool surface, no local Storybook required):
47# npm i -D @storybook/mcp
48# npx storybook-mcp --registry https://chromatic.storybook.cloud
49
50# Enable testing toolset (requires addon-vitest)
51# npx storybook add @storybook/addon-vitest
52
53# Register with Claude Code
54npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project
55```
56
57## Detection Pattern
58
59Before using Storybook MCP tools, check availability:
60
61```python
62# Probe for storybook-mcp tools
63ToolSearch(query="+storybook list-all-documentation")
64
65# If tools found → Storybook MCP is available
66# If not found → fallback to filesystem-based component discovery
67```
68
69## Rule Details
70
71Load rules on demand with `Read("rules/<file>")`:
72
73| Rule | Impact | Description |
74|------|--------|-------------|
75| `component-discovery` | HIGH | Use list-all-documentation + get-documentation before generating new components |
76| `story-preview-verification` | HIGH | Embed preview-stories URLs for visual confirmation |
77| `mcp-test-runner` | CRITICAL | Run run-story-tests with a11y:true after component generation |
78
79## Toolset Selection
80
81Filter toolsets via `X-MCP-Toolsets` header to reduce agent context:
82
83| Agent Role | Toolsets | Rationale |
84|------------|----------|-----------|
85| component-curator | `docs` | Inventory + props only, no testing |
86| frontend-ui-developer | `dev,docs,testing` | Full access for gen → verify loop |
87| design-system-architect | `docs` | Component metadata for governance |
88
89## Chromatic Remote Publishing
90
91For teams using Chromatic, the docs toolset is publishable remotely:
92- Published at `https://<chromatic-storybook-url>/mcp`
93- Only docs toolset available remotely (dev + testing need local Storybook)
94- Useful for cross-team design system discovery without running Storybook locally
95
96## Graceful Degradation
97
98| Storybook MCP | Fallback | Behavior |
99|---------------|----------|----------|
100| Available | — | Use MCP tools for component discovery, testing, previews |
101| Unavailable | Filesystem | `Glob("**/components/**/*.tsx")` + `Grep` for component inventory |
102| Unavailable | 21st.dev | Search public registry via 21st-dev-magic MCP |
103| Unavailable | Manual | Claude multimodal analysis of screenshots |
104
105## Related Skills
106
107- `storybook-testing` — CSF3 patterns, Vitest integration, Chromatic TurboSnap
108- `component-search` — 21st.dev registry search (external components)
109- `design-to-code` — Full mockup-to-component pipeline (uses this skill in Stage 2)
110- `ui-components` — shadcn/ui + Radix component patterns
yonatangross