Skip to main content
Glama
deenesjakoruzh
mcpland

storybook-mcp

by mcpland
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

Storybook MCP サーバー

Node CI npm license

Storybook のドキュメントやコンポーネント情報とやり取りするためのツールを提供する Model Context Protocol (MCP) サーバーです。

機能

  • getComponentList: 設定された Storybook から全コンポーネントのリストを取得します

  • getComponentsProps: ヘッドレスブラウザの自動化を使用して、複数のコンポーネントの詳細な props 情報を取得します

  • Custom Tools: 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

複数のコンポーネントの詳細な props 情報を取得します。これには以下が含まれます：

  • プロパティ名

  • 型

  • デフォルト値

  • 説明

  • 必須/任意ステータス

パラメータ:

  • componentNames (文字列の配列): props 情報を取得するコンポーネント名の配列

使用例:

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. Props 情報: コンポーネントの props について、サーバーは以下を行います：

    • index.json からコンポーネントのドキュメント ID を検索

    • コンポーネントのドキュメントページ用の iframe URL を構築

    • Playwright を使用してヘッドレスブラウザでページを読み込み

    • ドキュメントから props テーブルの 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

注: 必要に応じて yarn dev の代わりに npx @modelcontextprotocol/inspector tsx src/index.ts を使用することもできます。

ビルド

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