Back to Details

storybook-mcp-integration

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Storybook MCP Integration

Storybook MCP 集成

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.
使用Storybook MCP服务器（
@storybook/addon-mcp
）可以让Agent感知项目的真实组件库——包括props、stories、测试用例和实时预览。

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
  • 组件生成 — 创建新组件前先检索现有Storybook组件
  • 组件测试 — 通过MCP而非CLI运行story测试和无障碍（a11y）审计
  • 视觉校验 — 在聊天中嵌入story预览链接供用户确认
  • 组件审计 — 通过MCP获取全量元数据的组件清单

Quick Reference — 6 Tools, 3 Toolsets

快速参考 — 6款工具，3个工具集

ToolsetToolPurposeKey Inputs
dev
get-storybook-story-instructions
Guidance on writing stories + interaction testsnone
dev
preview-stories
Returns preview URLs for stories (embeddable)
stories[]: {storyId}
or 
{absoluteStoryPath, exportName}
docs
list-all-documentation
Full component + docs manifest indexnone
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)
工具集工具用途核心入参
dev
get-storybook-story-instructions
编写story和交互测试的指导说明无
dev
preview-stories
返回story的预览URL（可嵌入）
stories[]: {storyId}
或 
{absoluteStoryPath, exportName}
docs
list-all-documentation
全量组件和文档清单索引无
docs
get-documentation
props、前3个story、story索引、文档
id
（必填）, 
storybookId
（可选）
docs
get-documentation-for-story
完整story源码和组件文档
componentId
, 
storyName
（必填）
testing
run-story-tests
运行组件和无障碍测试，返回通过/失败结果和违规项
stories[]
（可选）, 
a11y
布尔值（默认true）

Prerequisites

前置要求

bash
undefined
bash
undefined

Storybook 10.3+ with Vite builder (no webpack)

Storybook 10.3+ 搭配 Vite 构建工具（不支持webpack）

npx storybook@latest upgrade
npx storybook@latest upgrade

Install the addon

安装插件

npx storybook add @storybook/addon-mcp
npx storybook add @storybook/addon-mcp

Enable docs toolset (required for component discovery)

启用文档工具集（组件发现功能必填）

In .storybook/main.ts:

在 .storybook/main.ts 中添加配置：

experimentalComponentsManifest: true

experimentalComponentsManifest: true

Enable testing toolset (requires addon-vitest)

启用测试工具集（需要 addon-vitest 插件）

npx storybook add @storybook/addon-vitest

npx storybook add @storybook/addon-vitest

Register with Claude Code

注册到 Claude Code

npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project
undefined
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project
undefined

Detection Pattern

检测模式

Before using Storybook MCP tools, check availability:
python
undefined
使用Storybook MCP工具前，先检查可用性：
python
undefined

Probe for storybook-mcp tools

探测 storybook-mcp 工具是否存在

ToolSearch(query="+storybook list-all-documentation")
ToolSearch(query="+storybook list-all-documentation")

If tools found → Storybook MCP is available

如果工具存在 → Storybook MCP 可用

If not found → fallback to filesystem-based component discovery

如果不存在 → 降级使用基于文件系统的组件发现方案

undefined
undefined

Rule Details

规则详情

Load rules on demand with 
Read("${CLAUDE_SKILL_DIR}/rules/<file>")
:
RuleImpactDescription
component-discovery
HIGHUse list-all-documentation + get-documentation before generating new components
story-preview-verification
HIGHEmbed preview-stories URLs for visual confirmation
mcp-test-runner
CRITICALRun run-story-tests with a11y:true after component generation
通过 
Read("${CLAUDE_SKILL_DIR}/rules/<file>")
按需加载规则：
规则影响等级描述
component-discovery
高生成新组件前先调用 list-all-documentation 和 get-documentation 检索现有组件
story-preview-verification
高嵌入 preview-stories 返回的URL用于视觉确认
mcp-test-runner
极高组件生成后调用 run-story-tests 并开启 a11y:true 运行测试

Toolset Selection

工具集选择

Filter toolsets via 
X-MCP-Toolsets
header to reduce agent context:
Agent RoleToolsetsRationale
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
通过 
X-MCP-Toolsets
请求头过滤工具集，减少Agent上下文负载：
Agent角色工具集选型逻辑
component-curator
docs
仅需要组件清单和props信息，无需测试能力
frontend-ui-developer
dev,docs,testing
完整权限支持生成→校验的开发闭环
design-system-architect
docs
仅需要组件元数据用于治理

Chromatic Remote Publishing

Chromatic 远程发布

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
使用Chromatic的团队可以将文档工具集远程发布：
  • 发布地址为 
    https://<chromatic-storybook-url>/mcp
  • 远程仅支持文档工具集（开发和测试工具集需要本地运行Storybook）
  • 无需本地运行Storybook即可实现跨团队设计系统检索，实用性强

Graceful Degradation

优雅降级

Storybook MCPFallbackBehavior
Available—Use MCP tools for component discovery, testing, previews
UnavailableFilesystem
Glob("**/components/**/*.tsx")
+ 
Grep
for component inventory
Unavailable21st.devSearch public registry via 21st-dev-magic MCP
UnavailableManualClaude multimodal analysis of screenshots
Storybook MCP状态降级方案表现
可用—使用MCP工具实现组件发现、测试、预览功能
不可用文件系统检索执行 
Glob("**/components/**/*.tsx")
+ 
Grep
获取组件清单
不可用21st.dev通过21st-dev-magic MCP检索公共组件 registry
不可用手动处理Claude多模态分析截图识别组件

Related Skills

相关技能

  • storybook-testing
    — CSF3 patterns, Vitest integration, Chromatic TurboSnap
  • component-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
  • storybook-testing
    — CSF3 模式、Vitest集成、Chromatic TurboSnap
  • component-search
    — 21st.dev registry 检索（外部组件）
  • design-to-code
    — 完整的设计稿转组件流程（第二阶段会使用本技能）
  • ui-components
    — shadcn/ui + Radix 组件模式