# Storybook MCP

Storybook MCP 是官方推出的模型上下文协议（MCP）服务器，可将AI助手与您的Storybook连接，提供机器可读的组件元数据、故事、属性和文档，让助手能够智能复用UI组件并通过测试自行修正。

Canonical URL: https://a2a-mcp.org/entry/storybook-mcp-zh

Language: zh

Category: MCP Servers

Updated: 2026-04-09

## 概述

Storybook MCP 是 Storybook 团队推出的官方集成工具，它将 [模型上下文协议 (MCP)](https://modelcontextprotocol.io/) 的强大功能引入组件驱动的 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 渲染器）。

```bash
# 升级 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)

## Tags

- storybook
- mcp
- ai助手
- react
- ui组件
- 设计系统
- 前端
- typescript

## Sources

- [Project website](https://storybook.js.org/docs/ai/mcp/overview)