← 返回目录

Storybook MCP Addon

官方

已归档

在 Storybook 开发服务器中运行的 MCP 插件，帮助 AI 智能体自动编写和测试 UI 组件的 Story。

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 开发工具第 192 / 438
Stars: ★ 270 非常热门
传输方式: Streamable HTTP
运行环境: Node.js 24+
凭据: 无需凭据
许可证: MIT
最近提交: 34 天前
工具数: 2

55FMRS · C

这是 Storybook 官方（storybookjs 组织）维护的 MCP 插件，随 Storybook 开发服务器一起运行，通过 streamable-http 暴露组件信息，帮助 AI 智能体编写和验证 Story；项目仍处于实验阶段，仅适用于已使用 Storybook 的本地开发环境。

最强项 · 维护活跃度 13/20 最弱项 · 可靠性 8/20

可靠性

8/20

安全与权限

12/20

维护活跃度

13/20

文档质量

11/20

安装易用性

11/20

查看各项评分依据

可靠性 8/20: manifest 声明了 streamable-http 传输和端口参数，README 提供了 curl 示例（tools/list、tools/call）说明预期握手行为，但仓库未随附实际的工具列表定义、server.ts 源码或可审查的测试文件内容，也未看到具体 CI workflow 文件用于验证。仅凭静态材料无法确认声明的工具（如 list-all-documentation）与实际行为一致，也无法判断错误处理是否可控。按静态审查规则，缺少可验证的执行证据，评分不超过12分，此处给8分，体现'happy path看似合理但证据薄弱'。
安全与权限 12/20: 该服务器默认绑定 localhost（可配置端口），属于本地开发工具，未见硬编码凭证、外部网络回传或凭证窃取迹象，不构成红线风险。但描述中提到该工具会'自动编写和测试UI组件的story'，意味着可能存在写文件和执行测试等具有副作用的操作，而所提供材料中未说明这些操作是否需要用户确认或有权限边界控制，工具清单和权限范围也未在manifest中列出。因此主要风险可见但确认机制/权限范围披露不完整，扣分后为12分。
维护活跃度 13/20: 仓库非archived，采用MIT许可证，使用Changesets进行版本管理和发布流程，README注明项目'处于活跃开发中'，并有格式化、lint、typecheck等质量检查流程。50个未关闭issue相对于266星显得不低，且本次材料未提供实际commit历史或release频率的直接证据，故不能满分。综合看有较清晰的治理结构和版本管理路径，给13分。
文档质量 11/20: README作为贡献者指南非常详尽，涵盖安装、开发、测试、调试(MCP Inspector)、发布流程等，但主要面向贡献者而非最终用户；manifest本身未包含工具参数、认证方式、限制或故障排查的具体说明，用户侧README（packages/addon-mcp内）内容未在本次材料中提供，无法评估工具级文档质量。缺少工具参数说明和面向终端用户的成本/限制披露，扣分后为11分。
安装易用性 11/20: manifest提供了明确的npm包标识、传输类型和可配置端口（默认6006），README展示了通过pnpm安装、构建、启动Storybook及连接MCP端点的步骤，具有一定的清晰度。但未提供主流客户端（如Claude Desktop/Claude Code）的具体配置示例，仅间接提及.vscode/mcp.json的存在，缺少完整的客户端接入片段。按静态审查规则，无真实CI+测试佐证时setup上限为15分，本例证据一般，给11分。

静态评测 · 未实际运行收录于 2026-08-26

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

已经在使用 Storybook 的前端团队，希望借助 AI 智能体起草或测试组件 Story
使用 Claude Code 或 Codex 并希望获得开箱即用 Storybook 集成的开发者

不适合谁

未使用 Storybook 的项目
需要托管在远程/云端而非随本地开发服务器运行的 MCP 服务的团队

所需权限

在本地启动一个绑定到 Storybook 开发服务器端口（默认 6006）的 HTTP 服务
读取项目中的组件文件与已有 Story 内容

风险与副作用

README 明确说明该项目处于实验阶段，API 与架构可能随时变化
源材料未提及该本地 HTTP 端点有身份验证机制，若开发服务器端口对外暴露，可能被同一网络内的其他进程访问

安装接入

准备工作

运行环境：Node.js 24+

在你的 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 配置。

.mcp.json

{"mcpServers":{"storybook":{"type":"streamable-http","url":"http://localhost:6006/mcp"}}}

以 Claude Code 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "storybook": {
      "type": "streamable-http",
      "url": "http://localhost:6006/mcp"
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add --transport http storybook http://localhost:6006/mcp

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

启动 Storybook 后，在客户端中连接 http://localhost:6006/mcp，工具列表中应出现 list-all-documentation 和 preview-stories；也可用 curl 发送 tools/list 请求确认服务器在运行。

常见排障

连接前确认 Storybook 开发服务器已启动（如运行 `pnpm storybook` 或项目对应的 storybook 命令）
可用 curl 向 `http://localhost:6006/mcp` 发送 `tools/list` 请求，确认 MCP 端点正常响应
若未使用默认 6006 端口，检查客户端配置的 URL 与 `--port` 参数是否与实际 Storybook 端口一致
使用仓库自带的 MCP Inspector（`pnpm inspect`）或 MCPJam Inspector 进行底层调试

试试这样问

连接成功后，可以直接对 AI 助手这样说：

列出 Storybook 中所有组件的文档
给我看看所有按钮 story 的预览效果，使用 Storybook MCP
帮我为这个 UI 组件自动编写并测试 story
运行 preview-stories 工具，展示当前 story 的渲染结果

工具能力 2

list-all-documentation 只读

列出该服务器暴露的所有 Storybook 文档资源。

preview-stories 只读

在 MCP 客户端界面中渲染组件 Story 的实时预览，便于智能体和开发者直观核实渲染结果。

使用场景

让 AI 智能体为现有 UI 组件自动编写新的 Storybook Story

验证新生成或修改后的 Story 是否能正确渲染

在编码助手中直接查询项目现有的组件文档和 Story 信息

支持客户端

Claude Code

Codex

VS Code部分支持

依据项目文档列出，未经本站实测。

详细介绍

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 和架构可能会发生变化。