适合谁
- 已经在使用 Storybook 的前端团队，希望借助 AI 智能体起草或测试组件 Story
- 使用 Claude Code 或 Codex 并希望获得开箱即用 Storybook 集成的开发者
S
55FMRS · C
这是 Storybook 官方（storybookjs 组织）维护的 MCP 插件，随 Storybook 开发服务器一起运行，通过 streamable-http 暴露组件信息，帮助 AI 智能体编写和验证 Story；项目仍处于实验阶段，仅适用于已使用 Storybook 的本地开发环境。
Storybook MCP Addon（包名 @storybook/addon-mcp）是 Storybook 官方组织 storybookjs 维护的插件，作为 Storybook 开发服务器的一部分运行一个 MCP 服务端，通过 streamable-http 协议在 http://localhost:6006/mcp（端口可通过 --port 参数配置）暴露组件信息与开发工作流，使 AI 智能体能够读取组件文档、编写新的 Story 并验证其渲染效果。仓库同时提供 Claude Code 和 Codex 插件，用于自动配置该 MCP 服务器。项目 README 明确说明该项目仍处于实验阶段，API 和架构可能会发生变化。
工具能力
list-all-documentation
列出该服务器暴露的所有 Storybook 文档资源。
preview-stories
在 MCP 客户端界面中渲染组件 Story 的实时预览，便于智能体和开发者直观核实渲染结果。
安装接入
- 在你的 Storybook 项目中安装插件：
npm install --save-dev @storybook/addon-mcp（或使用 pnpm/yarn），并在.storybook/main.ts的 addons 列表中加入@storybook/addon-mcp。 - 启动 Storybook 开发服务器（例如
pnpm storybook），MCP 服务会随之运行，默认监听http://localhost:6006/mcp。 - 在 MCP 客户端（如 Claude Code、Codex 或支持 MCP 的编辑器）中添加一个 streamable-http 类型的服务器，地址指向该 URL；若 Storybook 使用了非默认端口，需通过
--port参数或客户端配置同步调整。 - 也可以通过 Claude Code / Codex 插件市场安装官方插件（
claude plugin marketplace add storybookjs/mcp@main等）来自动完成 MCP 配置。
claude_desktop_config.json
{"mcpServers":{"storybook":{"type":"streamable-http","url":"http://localhost:6006/mcp"}}}
选型与风险
不适合谁
- 未使用 Storybook 的项目
- 需要托管在远程/云端而非随本地开发服务器运行的 MCP 服务的团队
所需权限
- 在本地启动一个绑定到 Storybook 开发服务器端口（默认 6006）的 HTTP 服务
- 读取项目中的组件文件与已有 Story 内容
风险与副作用
- README 明确说明该项目处于实验阶段，API 与架构可能随时变化
- 源材料未提及该本地 HTTP 端点有身份验证机制，若开发服务器端口对外暴露，可能被同一网络内的其他进程访问
常见排障
- 连接前确认 Storybook 开发服务器已启动（如运行 `pnpm storybook` 或项目对应的 storybook 命令）
- 可用 curl 向 `http://localhost:6006/mcp` 发送 `tools/list` 请求，确认 MCP 端点正常响应
- 若未使用默认 6006 端口，检查客户端配置的 URL 与 `--port` 参数是否与实际 Storybook 端口一致
- 使用仓库自带的 MCP Inspector（`pnpm inspect`）或 MCPJam Inspector 进行底层调试
使用场景
让 AI 智能体为现有 UI 组件自动编写新的 Storybook Story
验证新生成或修改后的 Story 是否能正确渲染
在编码助手中直接查询项目现有的组件文档和 Story 信息
支持客户端
Claude Code完整支持
Codex完整支持
VS Code (Insiders)部分支持