项目简介

Storybook MCP 服务是一个基于 Model Context Protocol (MCP) 构建的后端应用，它将 Storybook 中的 UI 组件信息、故事 (stories) 及其开发工作流标准化，并通过 JSON-RPC 协议提供给大型语言模型 (LLM) 客户端。这使得 AI 代理能够更好地理解和操作 Storybook 中的 UI 组件，从而提高开发效率。

该项目包含两个主要部分：

'@storybook/mcp': 一个独立的 MCP 库，用于提供 Storybook 组件知识服务，可单独使用。
'@storybook/addon-mcp': 一个 Storybook 插件，它在您的 Storybook 开发服务器中运行一个 MCP 服务器，并集成了 '@storybook/mcp' 的功能。

主要功能点

组件资源管理: 托管和管理 Storybook UI 组件的元数据，包括组件名称、描述、属性 (props) 和代码示例。
工具执行: 提供多种工具供 LLM 调用，例如：
- 'list-all-components': 列出所有可用的 UI 组件及其摘要信息。
- 'get-component-documentation': 获取指定 UI 组件的详细文档，包括其故事、属性信息和代码片段。
- 'get-story-urls': 获取 Storybook 中指定故事的访问 URL，方便 AI 代理查看或引用特定故事。
- 'get-ui-building-instructions': 提供 UI 组件开发的一般性指导和当前 Storybook 框架信息，帮助 AI 代理理解开发上下文。
标准化交互: 通过 JSON-RPC 协议与 MCP 客户端进行通信，确保 LLM 客户端能够以统一、结构化的方式获取上下文信息和调用功能。
会话管理与能力声明: 支持 MCP 协议的会话初始化和服务器能力声明，为 LLM 客户端提供安全、可扩展的上下文服务框架。

安装步骤

在开始之前，请确保您的开发环境中已安装 Node.js 24+ 和 pnpm 10.19.0+。

克隆仓库: 打开您的终端或命令提示符，执行以下命令克隆项目仓库：

git clone https://github.com/storybookjs/mcp.git

进入项目目录: 导航到克隆下来的项目根目录：
```
cd mcp
```
安装依赖: 使用 pnpm 安装所有项目依赖：
```
pnpm install
```
构建项目: 构建项目以生成可执行文件：
```
pnpm build
```
启动 Storybook 和 MCP 服务器: 执行以下命令，它将启动 Storybook 实例，并同时运行 MCP 服务器：
```
pnpm storybook
```
- Storybook 实例通常会在 'http://localhost:6006' 启动。
- MCP 服务器的 API 接口默认可在 'http://localhost:6006/mcp' 访问。

服务器配置

MCP 客户端需要配置 MCP 服务器的启动信息才能建立连接。以下是一个您可能需要提供给 MCP 客户端的 JSON 配置示例，请根据您的实际部署情况调整相关值：

{
  "name": "Storybook MCP Server",
  "description": "连接到 Storybook MCP 服务器，获取 UI 组件信息和开发工具。",
  "command": "pnpm",
  "args": ["storybook"],
  "port": 6006,
  "endpoint": "/mcp",
  "protocol": "http"
}

'name': MCP 服务器的显示名称，方便识别。
'description': MCP 服务器的简要功能说明。
'command': 启动 MCP 服务器的命令行命令。在此项目中，'pnpm storybook' 会同时启动 Storybook 和内置的 MCP 服务器。
'args': 启动命令的参数。
'port': MCP 服务器监听的网络端口，默认是 '6006'。
'endpoint': MCP 服务的具体 API 路径，通常是 '/mcp'。
'protocol': MCP 服务器使用的传输协议，例如 'http'。

基本使用方法

一旦 MCP 服务器通过 'pnpm storybook' 成功启动，您的 MCP 客户端就可以通过发送 JSON-RPC 请求与服务器进行交互。

例如，使用 'curl' 工具（或您的 MCP 客户端）来列出所有可用的工具：

curl -X POST \
  http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list",
    "params": {}
  }'

要调用特定的工具，例如获取所有组件的列表：

curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "list-all-components",
      "arguments": {}
    }
  }'

您的 MCP 客户端将接收到 JSON-RPC 格式的响应，其中包含 Storybook 组件的详细信息，或通过调用其他工具来辅助 UI 开发任务。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息