a2a mcp
Back to MCP Servers
Storybook MCP logo
mcp-server364

Storybook MCP

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

XFacebookLinkedInRedditHacker News

概述

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)

Tags

storybookmcpai助手reactui组件设计系统前端typescript

Related Entries

Keep exploring similar tools and resources in this category.

Browse MCP Servers
DataForSEO MCP Server logo

DataForSEO MCP Server

MCP Servers

DataForSEO MCP Server is the official Model Context Protocol server for connecting AI clients to DataForSEO SEO, SERP, keyword, backlink, on-page, business, domain, content, merchant, and AI optimization data. It can be used as a hosted Streamable HTTP endpoint, a local npx package, a Docker container, or a source-built TypeScript server.

vercel eve logo

vercel eve

MCP Servers

Vercel Eve is an open-source, filesystem-first TypeScript framework for building durable AI agents on Vercel. It organizes agent capabilities as files for instructions, tools, skills, channels, schedules, subagents, and connections, including integrations with external MCP and OpenAPI tools.

TinyFish logo

TinyFish

MCP Servers

TinyFish 为兼容 MCP 的 AI 助手提供网络自动化、网络搜索、内容提取和远程浏览器会话工具。托管的 MCP 服务器使用 OAuth 2.1，而可选的本地 @tiny-fish/mcp 代理支持仅本地、CI 和无头环境下的 API 密钥认证。

X MCP logo

X MCP

MCP Servers

X MCP 是 X 官方托管的 Model Context Protocol 服务器，可让兼容 MCP 的 AI 工具调用 X API 端点。它通过 xurl 桥接 OAuth 用户上下文，支持帖子搜索、用户查询、书签、趋势、新闻和 Articles 等工作流。

TinyFish logo

TinyFish

MCP Servers

TinyFish exposes web automation, web search, content extraction, and remote browser-session tools to MCP-compatible AI assistants. The hosted MCP server uses OAuth 2.1, while an optional local @tiny-fish/mcp proxy supports API-key authentication for local-only, CI, and headless setups.

openaiDeveloperDocs logo

openaiDeveloperDocs

MCP Servers

OpenAI Developer Docs MCP is an OpenAI-hosted, read-only server that lets MCP clients search and fetch documentation from developers.openai.com, platform.openai.com, and learn.chatgpt.com. It uses a public streamable HTTP endpoint and does not call the OpenAI API on the user's behalf.