AI导哈

Storybook文档提取服务

一个通用的MCP服务器，可实时连接到任何Storybook站点并提取文档，适用于支持MCP的AI或客户端。

  • by raksbisht
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 raksbisht/storybook-mcp

使用说明

Storybook MCP

A. 通用MCP服务器 连接到 任何故事书网站 并使用Playwright实时提取文档。

使用它 支持MCP的任何AI或客户端 （模型上下文协议）——游标、克劳德桌面、Windsurf或其他MCP主机。

特性

  • 适用于任何故事书 -自动检测格式和版本
  • 实时浏览 -基于剧作家的实时提取
  • 自动检测 -自动检测故事书格式
  • 单个文件 -只是 index.js，无构建步骤

MCP配置

光标--一键安装

使用npx（推荐）

添加到MCP客户端配置中（例如Cursor： ~/.cursor/mcp.json 或设置→ MCP;克劳德： claude_desktop_config.json；等等）：

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": ["-y", "@raksbisht/storybook-mcp"]
    }
  }
}

使用默认故事书URL（可选）：

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": ["-y", "@raksbisht/storybook-mcp"],
      "env": {
        "STORYBOOK_URL": "https://your-storybook.com"
      }
    }
  }
}

来源（开发）

git clone https://github.com/raksbisht/storybook-mcp.git
cd storybook-mcp
npm install

然后在MCP配置中：

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": ["/path/to/storybook-mcp/index.js"]
    }
  }
}

可用工具

工具 说明
connect 连接到故事书URL并获取连接状态。在其他工具之前需要。
list 在导航中列出组件和故事。可选： category, full （等级制度）。
search 按名称或路径搜索组件。必修的： query.
get_docs 获取组件或故事的文档、代码示例和内容。必修的： path.可选： full, format （降价/结构化）。
screenshot 截取组件或故事的屏幕截图。必修的： path.

示例

1. connect({ url: "https://storybook.js.org" })
2. search({ query: "button" })
3. get_docs({ path: "components-button--basic" })

兼容性

适用于常见的Storybook部署（各种URL格式和 index.json-基于设置）。

许可证

麻省理工学院

相关 MCP