mcpField
S
Storybook Mcp

Storybook Mcp

本地服务
github.com/raksbisht开发工具133 周前更新
代码仓库

关于 Storybook Mcp

Storybook Mcp 面向需要查看 Storybook 站点的 AI 客户端，使用 Playwright 浏览实时内容并提取组件和故事文档，无需构建步骤。

主要功能

  1. 01连接 Storybook 站点
  2. 02自动检测格式和版本
  3. 03使用 Playwright 浏览并提取实时内容
  4. 04列出并搜索组件和故事
  5. 05获取文档、示例和截图

适用场景

  1. 01按名称或路径查找组件
  2. 02获取故事的文档
  3. 03通过截图查看组件

MCP 相关

提供连接 Storybook URL、列出和搜索组件与故事、获取文档及截取屏幕的工具。MCP 客户端可借此查看实时 Storybook 内容。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": [
        "-y",
        "@raksbisht/storybook-mcp"
      ],
      "env": {
        "STORYBOOK_URL": "<STORYBOOK_URL>"
      }
    }
  }
}
启动命令npx -y @raksbisht/storybook-mcp
需要配置的环境变量
STORYBOOK_URL

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@raksbisht/storybook-mcp

工具

5

收录的工具列表 · 更新于 3 周前

参数类型必填说明
urlstring否Storybook URL（如果已连接则为可选；将返回当前状态）

详细介绍

Storybook MCP

Storybook MCP 标志

一个通用 MCP 服务，可连接到任何 Storybook 站点，并使用 Playwright 实时提取文档。

可与任何支持 MCP（Model Context Protocol）的 AI 或客户端搭配使用，例如 Cursor、Claude Desktop、Windsurf 或其他 MCP 主机。

功能

  • 适用于任何 Storybook - 自动检测格式和版本
  • 实时浏览 - 基于 Playwright 实时提取
  • 自动检测 - 自动检测 Storybook 格式
  • 单文件 - 仅需 index.js，无需构建

MCP 配置

Cursor — 一键安装

将 MCP 服务添加到 Cursor

使用 npx（推荐）

将以下内容添加到 MCP 客户端配置中（例如 Cursor：~/.cursor/mcp.json 或 Settings → MCP；Claude：claude_desktop_config.json；等等）：

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

使用默认 Storybook 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连接到 Storybook URL 并获取连接状态。必须先于其他工具调用。
list列出导航中的组件和故事。可选参数：category、full（层级结构）。
search按名称或路径搜索组件。必需参数：query。
get_docs获取组件或故事的文档、代码示例和内容。必需参数：path。可选参数：full、format（markdown/structured）。
screenshot截取组件或故事的屏幕截图。必需参数：path。

示例

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

兼容性

适用于常见的 Storybook 部署方式（各种 URL 格式以及基于 index.json 的配置）。

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。