Skip to main content
Glama
deenesjakoruzh
mcpland

storybook-mcp

by mcpland
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

Storybook MCP 服务器

Node CI npm license

一个模型上下文协议 (MCP) 服务器，提供与 Storybook 文档和组件信息交互的工具。

功能

  • getComponentList: 从配置的 Storybook 中获取所有组件的列表

  • getComponentsProps: 使用无头浏览器自动化获取多个组件的详细属性 (props) 信息

  • 自定义工具: 创建自定义工具，使用 JavaScript 从 Storybook 页面中提取任何信息

Related MCP server: dbt-mcp

安装与配置

MCP 设置

将以下配置添加到 MCP 设置中：

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "<your_storybook_url>/index.json"
      }
    }
  }
}

storybook-mcp 会立即启动，并在首次运行时在后台安装 Chromium。如果您想提前安装浏览器，请运行 npx -y storybook-mcp@latest install-browser。在下载完成之前，首次调用基于浏览器的工具可能需要更长时间。

环境变量

  • STORYBOOK_URL (必需): 指向 Storybook 的 index.json 文件的 URL

  • CUSTOM_TOOLS (可选): 用于从 Storybook 提取特定信息的自定义工具定义的 JSON 数组

使用方法

该服务器提供内置工具并支持自定义工具：

内置工具

1. getComponentList

从配置的 Storybook 中检索所有可用组件的列表。

示例：

Available components:
Accordion
Avatar
Badge
Button
...

2. getComponentsProps

获取多个组件的详细属性信息，包括：

  • 属性名称

  • 类型

  • 默认值

  • 描述

  • 必填/可选状态

参数：

  • componentNames (字符串数组): 要获取属性信息的组件名称数组

使用示例：

Tool: getComponentsProps
Parameters: { "componentNames": ["Button", "Input", "Avatar"] }

自定义工具

您可以定义自定义工具以从 Storybook 页面中提取特定信息。每个自定义工具可以：

  • 导航到 Storybook 中的任何页面

  • 执行自定义 JavaScript 以提取数据

  • 将结构化数据返回给 AI 助手

自定义工具结构：

interface CustomTool {
  name: string; // Unique tool name
  description: string; // Tool description for the AI
  parameters: object; // Input parameters schema (optional)
  page: string; // URL to navigate to
  handler: string; // JavaScript code to execute on the page
}

自定义工具示例：

[
  {
    "name": "getIconList",
    "description": "Get All Icons from the Icon page",
    "parameters": {},
    "page": "https://your-storybook.com/?path=/docs/icon--docs",
    "handler": "Array.from(document.querySelectorAll('.icon-name')).map(i => i.textContent)"
  },
  {
    "name": "getColorPalette",
    "description": "Extract color palette from design tokens",
    "parameters": {},
    "page": "https://your-storybook.com/?path=/docs/design-tokens--colors",
    "handler": "Array.from(document.querySelectorAll('.color-swatch')).map(el => ({ name: el.getAttribute('data-color-name'), value: el.style.backgroundColor }))"
  }
]

有关更多示例和详细文档，请参阅 examples/custom-tools-example.md。

示例

使用 STORYBOOK_URL 和 CUSTOM_TOOLS 环境变量设置 Spectrum storybook-mcp 配置。

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "https://opensource.adobe.com/spectrum-web-components/storybook/index.json",
        "CUSTOM_TOOLS": "[{\"name\":\"getIconList\",\"description\":\"Get All Icons from the Icon page\",\"parameters\":{},\"page\":\"https://opensource.adobe.com/spectrum-web-components/storybook/iframe.html?viewMode=docs&id=icons--docs&globals=\",\"handler\":\"Array.from(document.querySelector('icons-demo').shadowRoot.querySelectorAll('.icon')).map(i => i.textContent)\"}]"
      }
    }
  }
}

工作原理

  1. 组件列表: 服务器获取 Storybook 的 index.json 文件（v3 版本为 stories.json）并提取所有标记为 "docs" 类型的组件

  2. 属性信息: 对于组件属性，服务器会：

    • 从 index.json 中查找组件的文档 ID

    • 构建组件文档页面的 iframe URL

    • 使用 Playwright 在无头浏览器中加载页面

    • 从文档中提取属性表格 HTML

支持的 Storybook URL

该服务器适用于任何公开 index.json 文件（v3 版本为 stories.json）的 Storybook。常见模式：

  • https://your-storybook-domain.com/index.json

  • https://your-storybook-domain.com/storybook/index.json

开发

本地开发

  1. 克隆仓库

  2. 安装依赖: yarn install

  3. 安装 Playwright 浏览器: yarn install:browser

  4. 设置环境变量: export STORYBOOK_URL="your-storybook-url"

  5. 在开发模式下运行: yarn dev

注意：如果您愿意，也可以使用 npx @modelcontextprotocol/inspector tsx src/index.ts 代替 yarn dev。

构建

yarn build

测试

yarn test

要求

  • Node.js 18.0.0 或更高版本

  • 由 Playwright 安装的 Chromium 浏览器

错误处理

服务器包含全面的错误处理，针对：

  • 缺失或无效的 Storybook URL

  • 网络连接问题

  • 未找到组件的情况

  • Playwright 浏览器自动化失败

许可证

Storybook MCP 采用 MIT 许可证。

Available Tools

2 tools
getComponentListA

Get a list of all components from the configured Storybook

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.6/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations exist, and the description does not disclose any behavioral traits such as side effects, permissions, or constraints. It only states the basic action.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single, front-loaded sentence with no extraneous words. Efficient and clear.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given zero parameters and no output schema, the description is reasonably complete for a simple list tool, though it could mention the output format or read-only nature.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema has zero parameters and 100% coverage, so the description adds no param info. Baseline for 0 params is 4, and the description is consistent.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Get', resource 'list of all components', and source 'configured Storybook', distinguishing it from sibling 'getComponentsProps' which likely focuses on props.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus the sibling 'getComponentsProps' or any other context. The description is purely functional without usage hints.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

getComponentsPropsB

Get props information for multiple components

ParametersJSON Schema
NameRequiredDescriptionDefault
componentNamesYesArray of component names to get props information for

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, and the description does not disclose any behavioral aspects such as read-only nature, error handling, or prerequisites. For a tool with no annotations, the description carries the full burden but fails to add context.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that is efficient and to the point, with no unnecessary words. For such a simple tool, this level of brevity is appropriate.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the low complexity (1 parameter, no output schema, no annotations), the description is minimally adequate but lacks any behavioral context or return format hints. It could be improved by noting the output structure or error cases.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the schema already documents the parameter. The description does not add meaning beyond what the schema provides, meeting the baseline for high coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Get' and the resource 'props information for multiple components'. It effectively distinguishes from the sibling tool 'getComponentList', which likely lists components rather than their props.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. The sibling tool 'getComponentList' is mentioned but not contrasted, leaving the agent to infer usage context.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

B3.4/5.0
Disambiguation5/5

Each tool targets a distinct purpose: one returns component list, the other returns props information. No overlap.

Naming Consistency4/5

Both use 'get' prefix followed by a noun, but one uses singular 'ComponentList' and the other plural 'ComponentsProps', a minor inconsistency.

Tool Count3/5

Only 2 tools feels thin for a Storybook assistant; more tools like individual component details or stories would be expected for a richer surface.

Completeness3/5

Covers listing components and their props, but lacks operations like getting individual component details, searching, or accessing stories, leaving notable gaps.

Maintenance

ActivityInactive
ResponsivenessWithin a week

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/mcpland/storybook-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server