Carbon MCP

Carbon MCP

Carbon Design System をあらゆる AI エージェントで利用できます。

Carbon MCP は、MCP を通じて AI エージェントが Carbon のコンポーネント、アイコン、チャート、ドキュメントに直接アクセスできるホスト型サーバーです。MCP は、AI アプリケーションを外部のツールやデータに接続するためのオープンな Model Context Protocol 標準です。IBM Cloud 上で稼働するため、どの MCP クライアントからでも URL と IBMid サインインを使って接続できます。このリポジトリでは、問題の報告や機能のリクエストを行い、Carbon Builder スキルを入手できます。

接続 · Carbon Builder スキル · ツール · 対応範囲 · 問題を報告

ホスト型サービスの利用規約 · Carbon Builder スキルの Apache-2.0 ライセンス

---

Carbon MCP を使う理由

Carbon MCP を使うと、あらゆるエージェント型 AI アプリケーションが Carbon Design System に精通し、チームは一貫性のある高品質なユーザーエクスペリエンスをより迅速に提供できます。

メリット	意味
Carbon に直接アクセス	AI エージェントは、色、タイポグラフィ、コンポーネントのソース、使用ガイドラインなど、必要なコンテキストを Carbon Design System に問い合わせます。
生成コードの品質向上	Carbon MCP のコード例とドキュメントを活用することで、AI ツールは設計および開発の実践に沿った、高い忠実度の Carbon UI コードを生成できます。
チーム全体で答えを共有	デザイナー、開発者、PM は、信頼できる共通の情報源から一貫した回答と例を得られるため、認識のずれや手戻りを減らせます。

接続

Carbon MCP サーバーは、リモートで https://mcp.carbondesignsystem.com/mcp にホストされています。クライアントにリモート MCP サーバーとして追加し、求められたら IBMid でサインインしてください。

mcp.json ファイルを読み込むクライアントでは、次の最小限の構成を使用します。

{
  "mcpServers": {
    "carbon-mcp": {
      "type": "streamable-http",
      "url": "https://mcp.carbondesignsystem.com/mcp",
      "oauth": true,
      "alwaysAllow": []
    }
  }
}

クライアント	セットアップ
IBM Bob	オンボーディング：IBM Bob
Claude Desktop	オンボーディング：Claude Desktop
Cursor	オンボーディング：Cursor
Figma Make	オンボーディング：Figma Make
Claude Code、VS Code、GitHub Copilot およびその他のクライアント	オンボーディング：その他のクライアント
OAuth に対応していないクライアント	トークンとセッション ID

オンボーディングとセットアップの完全ガイド では、開始前に準備するもの、 前提条件、 サーバーへの接続、 および上記すべてのクライアントについて説明しています。

トークンとセッション ID

クライアントが OAuth ディスカバリーに対応していない場合は、代わりに トークンとセッション ID で認証できます。

1. トークンとセッション IDを生成します。
2. 認証情報をコピーし、Carbon MCP の構成に追加します。

Carbon Builder スキルと組み合わせる

Carbon Builder は、エージェントを Carbon Design System のエキスパートエンジニアに変える、ポータブルな AI スキルです。Carbon MCP サーバーから最新のコンポーネントの使用例、バリエーション、プロパティ、ドキュメントを取得し、Carbon React と Web Components のコードを生成して、サポートされているすべてのフレームワークで Carbon Charts を構築します。

サーバーは事実を提供し、スキルはそれらをいつ尋ねるか、回答をどのように動作するコードに変えるかをエージェントに伝えます。両者を組み合わせることで、単独で使うよりも優れた結果が得られます。

skills CLI でインストールし、お使いのエージェントに対応する行を選択してください。

npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a bob
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a claude-code
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a cursor
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a codex
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a github-copilot
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a gemini-cli

CLI はさらに多くのエージェントに対応しています。詳しくは skills.sh をご覧ください。このスキルのページは skills.sh/carbon-design-system/carbon-mcp/carbon-builder にあります。

CLI を使わずにインストールするには、 carbon-builder.zip をダウンロードして展開し、carbon-builder/ フォルダーをクライアントのスキル保存場所にコピーします。 スキルの README に各クライアントのパスが記載されています。また、オンボーディングガイドの AI クライアントをセットアップして Carbon Builder スキルをインストールするで手順を説明しています。

ツール

ツール	返される内容
code_audit	デザイントークン、コンポーネントの使用方法、アクセシビリティ、レイアウト、ベストプラクティスに関する Carbon のガイドラインに照らしたコードのチェックです。
code_search	Carbon React と Web Components のコード例、アイコン、ピクトグラムです。完全なサンプルアプリケーションのファイルも含まれます。
docs_search	Carbon Design System と IBM 製品のドキュメントです。コンポーネントのガイダンス、使用方法、アクセシビリティ、リファレンス資料などが含まれます。
get_charts	React、Angular、Vue、Svelte、Vanilla JS、HTML 向けの Carbon Charts のコード例です。
labs_search	Carbon Labs の実験的なコンポーネントのコード例、プロパティ、イベント、使用方法のドキュメントです。

対応範囲

Carbon MCP は進化を続けています。現在の対応範囲は次のとおりです。

コーパス	例	インデックス化されている内容
@carbon/react	Button、Tabs、TextInput	コード例とドキュメント、コンポーネントごとの複数のバリエーション、すべての props とインポート
@carbon/web-components	button、tabs、text-input	コード例とドキュメント、コンポーネントごとの複数のバリエーション、すべての props とインポート
Carbon for IBM Products	Tearsheets、PageHeader	コード例とドキュメント、コンポーネントごとの複数のバリエーション、すべての props とインポート
Carbon Icons and Pictograms	Settings、User、UserAvatarFilled	コード例とドキュメント、使用方法
@carbon/ai-chat	basic、custom-element、history	コード例とドキュメント、完全なコード例、すべての props とインポート
@carbon/charts	デモへのリンクがあるチャートタイプ	チャートタイプの説明、デモへのリンク、完全なコード例、すべての props とインポート
@carbon-labs/*	React：AnimatedHeader、Processing、Resizer、UIShell、What's New	プレビュー候補のコード例とドキュメント、コンポーネントごとの複数のバリエーション、すべての props とインポート

概念のページでは、 コンテンツについて詳しく説明しています。

ドキュメント

ドキュメント	内容
概要	Carbon MCP の概要と主な利点
コンセプト	Carbon MCP のツールとコンテンツの対象範囲
オンボーディングとセットアップ	認証、一般的な MCP クライアントへの接続、Carbon Builder スキルのインストール
プロンプト	プロンプト作成のガイダンスとベストプラクティス
トークンの節約	不要なコンテキストや応答を削減して、AI ワークフローを高速かつコスト効率よく保つ方法
利用規約	IBM Cloud がホストする Carbon MCP サービスの利用規約
サポート	サポートを受ける方法
行動規範	このプロジェクトで全員に期待される行動

---

問題とサポート

問題を報告 して、バグの報告、機能のリクエスト、またはサポートの依頼を行ってください。それぞれのテンプレートが案内します。