Storybook组件分析工具

📘 故事书MCP服务器🚀

这台服务器 模型上下文协议（MCP） 通过
AI代理（Cline、Roo Code、Claude Desktop 等）家
本地 直接阅读和分析Storybook组件规范帮助您做到这一点的工具。

主要功能（Core Features）

🔍 智能元件导航

• configure.mdx不包括像这样的简单文档
• 只有存在实际使用示例（Story）的真正UI组件 筛选并提供列表

📋 Props明细提取

• 元件的 Docs页面 分析
• ArgsTable中定义的Props的
  名称/说明/默认值准确提取

💻 提取源代码

• Docs页面上的 自动单击“Show code”按钮
• 每个故事 实际React/JSX实现示例代码 收集

🧠 自动环境响应

• 对于没有Docs选项卡的元件
  自动切换到“Story（Canvas）”选项卡灵活处理

安装和设置（Setup）

1前提条件

• Node.js 安装
• 分析目标项目的 Storybook正在运行
  • 默认URL： http://localhost:6006

2配置（配置）

claude_desktop_config.json 或者
在VS Code的MCP设置文件（Cline设置等）中添加以下内容：

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": [
        "-y",
        "@woori-fisa-6th/storybook-mcp"
      ],
      "env": {
        "STORYBOOK_URL": "storybook_url_to_access"
      }
    }
  }
}

🧰 工具定义（Tool Definitions）

1️⃣ list_storybook_components

说明
设置Storybook URL的 index.json分析
故事存在的有效组件列表返回。

动作方式

• configure.mdx 等不包括简单的文档故事
• 仅过滤存在真实故事的元件

返回数据

• name ：元件名称
• url ：可访问的Docs或Story页面URL
• hasDocs ：是否存在Docs页面（true | false)
• availableStories ：包含的故事名称列表

2️⃣ analyze_storybook_props

参数

• url （字符串） ：要分析的组件的Docs页面地址

说明
使用Puppeteer等待页面完全渲染后，
ArgsTable (.docblock-argstable)在中定义 关于实际Props提取。

动作方式

• 自动进入Docs选项卡
• Props表渲染检测后收集数据

返回数据

• name ：Prop名称
• description ：Prop说明
• defaultValue ：默认值

3️⃣ extract_component_stories

参数

• url （字符串） ：组件Docs页面地址

说明
获取组件的实际实施示例
页面内的所有 自动单击“Show code”按钮所以
收集特定于故事的源代码。

动作方式

• 优先尝试Docs选项卡
• 如果没有Docs，则自动切换到Canvas（Story）选项卡
• 提取每个故事的代码块

返回数据

• stories ：故事排列
  • name ：故事名称
  • code ：该故事的React/JSX源代码