概述

Storybook MCP 是 Storybook 团队推出的官方集成工具，它将 模型上下文协议 (MCP) 的强大功能引入组件驱动的 UI 开发。该工具将您现有的 Storybook 转换成一个丰富、结构化的数据源，供 AI 智能体实时查询。

通过以优化且令牌高效的方式暴露组件元数据、故事、属性类型、使用示例和文档，Storybook MCP 使 AI 智能体能够构建符合团队设计系统的 UI，而非生成通用或不一致的代码。

核心功能

• 组件发现与上下文：智能体可以列出组件、获取详细属性、故事、控件和文档。
• 优化的清单：提供经过筛选、机器可读的有效载荷（组件清单），包含 API、变体、设计令牌和使用片段——远比原始源代码更高效。
• 故事生成与测试：智能体可以为组件编写新故事并自主运行测试，内置用于自我修正的反馈循环。
• 无缝集成：通过 @storybook/addon-mcp 包安装；MCP 服务器与 Storybook 开发服务器一同运行（通常在 /mcp 端点）。
• 独立库：在自定义设置中独立使用 @storybook/mcp。
• React 支持 (v10.3+)：目前针对 React 进行了优化，并计划支持更多框架。

工作原理

1. 安装附加组件：npx storybook add @storybook/addon-mcp
2. 运行您的 Storybook 开发服务器。
3. 将任何兼容 MCP 的 AI 智能体（Claude、Cursor 等）连接到 MCP 端点。
4. 智能体现在可以直接访问您的动态设计系统，以进行上下文感知的代码生成。

这创建了一个迭代工作流，智能体在其中生成代码、通过故事预览、运行测试并修复问题，无需持续的人工干预。

为开发者带来的益处

• 更高质量的 AI 输出：智能体遵循您既定的模式和组件 API，减少幻觉和返工。 -L 令牌效率：更小、更集中的上下文有效载荷意味着更好的性能和更低的成本。
• 生产 UI 的防护栏：测试反馈循环帮助智能体发布符合您标准的代码。
• 加速前端开发：非常适合设计系统团队、大型代码库和智能工作流。

使用场景

• 在重用组件库的同时生成新的 UI 功能。
• 将 Figma 设计转换为与您现有 Storybook 组件匹配的生产代码。
• 为组件覆盖度自主编写故事和测试。
• 为 AI 编码工具（例如 Cursor、Windsurf 或自定义智能体）增强前端特定智能。
• 在团队环境中维护大型设计系统的一致性。

安装与入门

要求 Storybook 10.3+（React 渲染器）。

# 升级 Storybook
npx storybook@latest upgrade

添加 MCP 插件

npx storybook add @storybook/addon-mcp

然后运行 `storybook dev`，并将你的代理连接至 `http://localhost:6006/mcp`（端口可能有所不同 ）。

完整文档请参阅 [Storybook AI / MCP 官方文档](https://storybook.js.org/docs/ai/mcp/overview) 。

## 相关资源

- 官方博客：[Storybook MCP for React](https://storybook.js.org/blog/storybook-mcp-for-react/)
- GitHub：[storybookjs/mcp](https://github.com/storybookjs/mcp)
- npm：[@storybook/addon-mcp](https://www.npmjs.com/package/@storybook/addon-mcp)