storybook-mcp-server は何をしますか？
🎨 TypeScript製MCPサーバーでStorybookを強化し、コンポーネント、ストーリー、スクリーンショットへのシームレスなAIアクセスを実現します。
概要
このMCPサーバーは、AIエージェントがStorybookのコンポーネントライブラリと対話できるようにします。開発者は、自然言語のクエリを使用してストーリーの取得、コンポーネントの詳細の表示、スクリーンショットの表示などを行うことができます。
機能
- ストーリーの取得: パターンやコンポーネント名でストーリーを検索して取得します。
- コンポーネントの詳細: コンポーネントのメタデータ、プロパティ、バリエーションを表示します。
- スクリーンショット: ストーリーのビジュアルスナップショットを取得します。
- 効率的な検索: ファジー・マッチングとパターンベースのフィルタリングを備えた高度な検索。
インストール
npx @ansariwaqqas/storybook-mcp-server
またはプロジェクトに直接インストール：
npm install @ansariwaqqas/storybook-mcp-server
設定
Claude Desktop / Cursor / Codex で使用する場合
claude_desktop_config.json に以下を追加：
{
"mcpServers": {
"storybook": {
"command": "npx",
"args": [
"-y",
"@ansariwaqqas/storybook-mcp-server",
"--storybook-dir",
"/path/to/your/.storybook"
]
}
}
}
使用例
利用可能なコンポーネントの一覧を表示
ストーリーブックにあるコンポーネントをすべて表示して
特定のコンポーネントに関する詳細情報の取得
Buttonコンポーネントの詳細とすべてのバリエーションを表示して
ストーリーのスクリーンショットの表示
Buttonコンポーネントのプライマリバリアントのスクリーンショットを見せて
開発
# リポジトリのクローン
git clone https://github.com/ansariwaqqas/storybook-mcp-server.git
# 依存関係のインストール
cd storybook-mcp-server
npm install
# 開発サーバーの起動
npm run dev
ライセンス
MIT