项目简介

Storybook MCP 插件是一个为 Storybook UI 开发设计的扩展，它运行一个模型上下文协议（MCP）服务器，使 AI 代理能够通过标准协议与 Storybook 进行交互。这有助于 AI 代理理解项目 UI 组件的开发规范，自动生成和链接组件的故事（stories），从而提高 UI 组件的开发效率、提供可视化验证和文档。

主要功能点

• 提供 UI 开发指南： 向 AI 代理提供项目特定的 UI 组件开发最佳实践和 Storybook 故事编写规范（如 CSF3 格式），确保代理遵循项目约定。
• 获取 Storybook 故事链接： 允许 AI 代理检索 Storybook 中特定组件故事的直接 URL，便于代理在开发过程中进行可视化验证或提供给用户。
• 与 AI 代理集成： 通过标准 MCP 协议，支持与 Claude Code, GitHub Copilot, Cursor 等多种流行的 AI 客户端集成，实现更智能的开发工作流。

安装步骤

1. 环境要求： 确保你的项目已安装 Storybook 并使用 Vite 作为构建工具（例如 '@storybook/react-vite'）。
2. 安装插件： 在项目根目录运行以下命令，自动安装并配置此插件：

   npx storybook add @storybook/addon-mcp
   

3. 启动 Storybook： 启动你的 Storybook 开发服务器：

   npm run storybook
   

   MCP 服务器将随 Storybook 一起启动，并在 '<你的Storybook开发服务器地址>/mcp' 路径下可用。通常默认地址为 'http://localhost:6006/mcp'。

MCP 服务器配置（针对 MCP 客户端）

MCP 服务器在 Storybook 运行时可用，其地址通常为 'http://localhost:6006/mcp' (如果 Storybook 运行在默认端口 6006)。要将此 MCP 服务器集成到你的 AI 客户端，你需要提供服务器的以下关键信息：

• 服务器 URL: 'http://localhost:6006/mcp' (请根据你的 Storybook 实际运行端口调整)。
• 传输协议 (Transport): 'http' (因为该插件使用的是 'StreamableHTTPServerTransport')。

Claude Code 示例配置命令 (请根据你的 AI 客户端文档进行配置)

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

此命令将 'http://localhost:6006/mcp' 注册为一个名为 'storybook-mcp' 的 MCP 服务器，并指定使用 HTTP 传输协议。

重要提示: 在 AI 代理尝试连接 MCP 服务器之前，请务必确保你的 Storybook 开发服务器已启动并正在运行。

基本使用方法

当 MCP 服务器配置到你的 AI 代理后，你可以通过自然语言提示，让代理利用 Storybook MCP 插件提供的工具来协助 UI 开发。

• 获取 UI 开发指南： 在开始任何 UI 或前端开发工作前，可以提示代理获取项目 UI 构建规范。 例如，你可以将以下提示添加到 AI 代理的系统或项目提示中，以确保代理在进行 UI 开发前始终调用此工具： 'Before doing any UI, frontend or React development, ALWAYS call the storybook MCP server to get further instructions.'
• 查看组件故事： 如果你需要查看特定组件的某个状态，可以提示代理获取相应的 Storybook 故事 URL。 例如：'I need to see the primary variant of the Button component' 代理可能会调用 'get_story_urls' 工具，并返回类似 'http://localhost:6006/?path=/story/example-button--primary' 的链接。