Storybook MCP Server
Storybook MCPサーバーでClaude連携・UIコンポーネント開発を自動化
最終更新：2026年3月26日89,871GitHub
クイックインストール
npx @storybook/mcp概要
Storybook MCP Serverの設定方法と使い方。
UIコンポーネント開発・ドキュメントツール「Storybook」をClaudeから操作できるMCPサーバー。
コンポーネントのストーリー作成・スタイルガイドの参照・コンポーネントカタログの検索が可能。
ClaudeとStorybookのMCPサーバー連携により、UIコンポーネントの仕様確認や新しいストーリーの自動生成を実現できる。
設定方法はStorybookサーバーのURLを設定するだけでシンプルに完結する。
料金・APIキー情報
料金
無料プランありAPIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
ClaudeがStorybookのコンポーネントカタログを参照してUI実装の一貫性を保てる
既存コンポーネントの使い方をClaudeがStorybookから確認して提案できる
新しいコンポーネントのストーリーファイルをClaudeが自動生成できる
デザインシステムのガイドラインをClaudeがStorybookから読み取って適用できる
セットアップ手順
- 1
Storybookが起動していることを確認する（npx storybook dev でローカル起動）
- 2
claude mcp add storybook -e STORYBOOK_URL=http://localhost:6006 -- npx -y @storybook/mcp
設定ファイル
⚠️
コピー前に確認
Storybookがインストール済みのプロジェクトで起動していること。ローカル開発環境またはホスト済みStorybookのURLが必要。
Terminal
claude mcp add storybook -e STORYBOOK_URL=http://localhost:6006 -e CHROMATIC_PROJECT_TOKEN=your-chromatic-token-here -- npx -y @storybook/mcp#Storybook#UIコンポーネント#デザインシステム#フロントエンド#ドキュメント