mcpField
S
Storybook MCP Addon

Storybook MCP Addon

ローカル
storybook.js.org開発ツール2717 週間前に更新
リポジトリ公式サイト

Storybook MCP Addon について

Storybook MCP Addon は、MCP を活用した UI 開発ワークフローのための Storybook アドオンです。Storybook を使い、AI エージェントにコンポーネント開発へ関わってもらいたい開発者を対象としています。README は簡潔で、導入と使い方の詳細は公式ドキュメントに案内されています。

主な機能

  1. 01Storybook 内で MCP サーバーを公開
  2. 02エンドポイントパスの変更に対応
  3. 03main.ts のアドオンオプションで設定

活用シーン

  1. 01MCP 経由でエージェントから Storybook のコンポーネント情報にアクセス
  2. 02プロジェクトごとに異なる MCP エンドポイントパスを設定

MCP 対応

このアドオンは Storybook 内で MCP サーバーを提供し、既定では /mcp パスで待ち受けます。エンドポイントのパスは設定で変更でき、MCP クライアントから接続できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "storybookjs-addon": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}
起動コマンドnpx -y @storybook/addon-mcp

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@storybook/addon-mcp0.6.0

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

Storybook MCP アドオン

MCP を活用した UI 開発ワークフロー向けの Storybook アドオンです。

Storybook MCP アドオンのデモ

インストール手順、使用例、API などについては、ドキュメントをご覧ください。

設定

デフォルトでは、このアドオンは /mcp で MCP サーバーを公開します。.storybook/main.ts で別の固定エンドポイントパスを設定できます。

export default {
	addons: [
		{
			name: '@storybook/addon-mcp',
			options: {
				endpoint: '/custom-mcp',
			},
		},
	],
};

エンドポイントには、/custom-mcp や /tools/mcp のような URL パス名を指定する必要があります。

Storybook について詳しくは、storybook.js.orgをご覧ください。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。