使用说明

项目简介

该项目实现了一个 Model Context Protocol (MCP) 服务器，专注于为语言模型 (LLM) 提供访问 Storybook 故事信息的能力。通过集成 Storybook，该服务器允许 LLM 应用检索组件库的元数据，例如 Storybook 中定义的故事标题和名称。

主要功能点

'get-stories' 工具: 允许客户端通过指定 Storybook 配置文件目录，获取该 Storybook 中所有故事的列表。返回的故事列表以文本形式呈现，方便 LLM 理解和利用。
基于 MCP 协议: 遵循 MCP 协议标准，确保与 MCP 客户端的兼容性和互操作性。
Stdio 传输: 使用标准输入输出 (Stdio) 作为服务器传输协议，简化部署和集成。

安装步骤

安装 Bun: 确保您的系统已安装 Bun JavaScript 运行时。您可以通过运行 'bunx --version' 检查是否已安装。如果未安装，请访问 https://bun.sh/docs/installation 按照说明进行安装。
下载仓库: 克隆或下载此 GitHub 仓库到您的本地计算机。
导航到项目目录: 使用终端或命令提示符，切换到您下载的仓库目录。

服务器配置

为了让 MCP 客户端连接到此服务器，您需要提供以下配置信息。请注意将 'path/to/your/react-storybook-mcp/index.ts' 替换为 'index.ts' 文件在您本地文件系统中的实际路径。

{
  "serverName": "storybook",
  "command": "bun",
  "args": ["path/to/your/react-storybook-mcp/index.ts"]
}

基本使用方法

启动 MCP 服务器: 打开终端，导航到仓库目录，并使用以下命令启动服务器：
```
bun path/to/your/react-storybook-mcp/index.ts
```
服务器成功启动后，您应该在控制台看到 "Server starting..." 和 "Server started successfully" 的消息。
配置 MCP 客户端: 在您的 MCP 客户端应用中，配置连接到此 MCP 服务器。您需要提供上面 服务器配置 中生成的 JSON 对象。
使用 'get-stories' 工具: 通过您的 MCP 客户端，调用 'get-stories' 工具。该工具需要一个参数 'configDir'，它代表 Storybook 配置文件的目录的绝对路径（例如，您的项目中的 '.storybook' 目录的完整路径）。工具执行成功后，将返回包含 Storybook 故事列表的文本内容。

例如，如果您想获取位于 '/Users/yourname/project/ui-library/.storybook' 的 Storybook 配置的故事，您需要在调用 'get-stories' 工具时，将 'configDir' 参数设置为 '/Users/yourname/project/ui-library/.storybook'。

{
  "tool_name": "get-stories",
  "arguments": {
    "configDir": "/Users/yourname/project/ui-library/.storybook"
  }
}

注意: 请确保提供的 'configDir' 路径是正确的，并且指向有效的 Storybook 配置文件目录。服务器需要访问该目录以构建 Storybook 索引并获取故事信息。

关键词