Storybook MCP Example

故事书MCP服务器示例

一个集成了Storybook和模型上下文协议（MCP）服务器的React+TypeScript+Vite项目，提供对故事文件和组件信息的访问。

概述

这个项目演示了如何构建一个可以读取和分析故事书故事文件的MCP服务器。MCP服务器提供以下工具：

• 列出项目中的所有故事文件
• 阅读特定故事文件的内容
• 提取组件元数据（道具、接口、导出）

项目结构

storybook-mcp-example/
├── src/
│   └── components/          # Example UI components
│       ├── Button.tsx
│       ├── Button.stories.tsx
│       ├── Card.tsx
│       ├── Card.stories.tsx
│       ├── Input.tsx
│       └── Input.stories.tsx
├── mcp-server/              # MCP server implementation
│   ├── src/
│   │   ├── index.ts
│   │   └── tools.ts
│   └── package.json
├── .cursor/                 # Cursor IDE MCP configuration
│   └── mcp.json
└── .storybook/              # Storybook configuration

示例组件

该项目包括三个示例UI组件：

• 按钮 -一个可定制的按钮，有变体（主要、次要、危险）和尺寸
• 卡 -带有可选图像和页脚部分的卡片组件
• 输入 -具有标签、错误状态和大小变量的输入字段组件

每个组件都有相应的故事书故事，展示了各种用例。

安装

使用pnpm安装依赖项：

# Install root dependencies
pnpm install

# Install MCP server dependencies and build
cd mcp-server
pnpm install
pnpm build
cd ..

用法

运行故事书

启动Storybook开发服务器：

pnpm storybook

故事书将于 http://localhost:6006

运行MCP服务器

构建并启动MCP服务器：

# First, build the MCP server
cd mcp-server
pnpm install
pnpm build

# Then run it
pnpm start

或者使用根目录下的便利脚本：

pnpm mcp-server

MCP服务器工具

MCP服务器提供三个工具：

1. list_stories

列出所有 .stories.tsx 项目中的文件。

{
  "storyFiles": [
    "src/components/Button.stories.tsx",
    "src/components/Card.stories.tsx",
    "src/components/Input.stories.tsx"
  ],
  "count": 3
}

2. get_story_content

读取特定故事文件的内容。

参数：

• storyPath （字符串，必填）：故事文件的路径（相对或绝对）

例子：

{
  "storyPath": "src/components/Button.stories.tsx"
}

3. get_component_info

从组件或故事文件中提取组件信息。

参数：

• componentPath （string，必填）：组件文件的路径

例子：

{
  "componentPath": "src/components/Button.tsx"
}

返回以下信息：

• 组件道具界面
• 默认导出
• 命名出口

发展

添加新组件

1. 在中创建新组件 src/components/
2. 添加类型定义并导出组件
3. 创建相应的 .stories.tsx 文件
4. MCP服务器将自动发现新故事

构建故事书

构建Storybook的静态版本：

pnpm build-storybook

技术栈

• 反应19 -UI库
• TypeScript -类型安全
• 维特 -构建工具和开发服务器
• 故事书9 -组件开发环境
• Tailwind CSS -造型
• 模型上下文协议SDK -MCP服务器框架

MCP服务器配置

适用于Cursor IDE（推荐）✨

该项目包括 .cursor/mcp.json 配置。Cursor将自动检测并使用MCP服务器。

步骤：

1. 在Cursor中打开此项目
2. 重新启动游标或重新加载MCP服务器
3. 使用光标聊天与您的故事书互动：

- “列出此项目中的所有故事文件” - “显示按钮组件的道具” - “分析卡组件故事”

MCP服务器提供了3个Cursor可以自动使用的工具：

• list_stories -列出所有故事文件
• get_story_content -读取故事文件内容
• get_component_info -提取组件元数据

适用于克劳德桌面

编辑您的Claude Desktop配置文件：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

视窗: %APPDATA%\Claude\claude_desktop_config.json

添加服务器配置：

{
  "mcpServers": {
    "storybook": {
      "command": "node",
      "args": [
        "/Users/dodo/workspace/practices/storybook-mcp-example/mcp-server/dist/index.js"
      ]
    }
  }
}

将路径替换为实际的项目路径。

添加配置后，重新启动Claude Desktop。

CLI用法（替代）

您还可以在任何终端中使用CLI包装器：

# List all stories
pnpm sb:list

# Get story content
node cli-wrapper.js get src/components/Button.stories.tsx

# Get component info
node cli-wrapper.js info src/components/Button.tsx

文档

• QUICKSTART.md -快速入门指南
• CURSOR_INTEGRATION.md -详细的Cursor IDE集成指南
• 用法_示例.md -使用示例和场景
• 项目\_ SUMMARY.md -综合项目总结

许可证

麻省理工学院