プロトタイプ · プレビュー版:公式レジストリのすべてのサーバーを掲載し、30分ごとに同期しています。レビューとアカウント機能は今後のステップで始まります。
PopNx MCPAIを使う人のためのMCPサーバー · やさしい言葉で解説

Carbon MCP

作者:carbon-design-systemバージョン 1.14.0i★ –iクラウドで動く
レジストリ名com.carbondesignsystem.mcp/carbon-mcp

インストール

概要

作者による説明(英語の原文)

Explore Carbon docs, components, tokens, icons, charts, and code examples.

PopNx MCPの3つの柱

この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。

できること

このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。

  • 接続方法: クラウドで動く
  • トランスポート: Streamable HTTP
  • カテゴリ: デザイン・画像・音声

インストール

使っているAIアプリを選んで、設定をコピーしてください。

インストールの前に

  • 基本チェック:3項目中3項目に合格
  • 作者のサーバーで動きます。あなたが頼んだ内容は、作者のサーバーを通ります。
  • レジストリには、入力が必要なキーは載っていません。

必要なもの

どのアプリを使っていますか?

上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。

ウェブ、デスクトップ、モバイルのClaudeで使えます:

  1. Settings → Connectors を開く
  2. Add custom connector を押す
  3. 下のアドレスを貼り付けて Add を押す
  4. サインインを求められたら、作者のサービスにサインインする
SettingsConnectors1+ Add2https://…3
https://mcp.carbondesignsystem.com/mcp

ターミナルでこれを実行します

claude mcp add --transport http carbon https://mcp.carbondesignsystem.com/mcp

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

{
  "mcpServers": {
    "carbon": {
      "url": "https://mcp.carbondesignsystem.com/mcp"
    }
  }
}

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

{
  "servers": {
    "carbon": {
      "type": "http",
      "url": "https://mcp.carbondesignsystem.com/mcp"
    }
  }
}

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

ChatGPTがつなげるのは、インターネット上のサーバーだけです:

  1. ウェブ版のChatGPTを開き → Settings → Connectors (Apps)
  2. Create または Add を押す(プランによっては、先に Advanced で Developer mode をオンにする必要があります)
  3. 下のアドレスを貼り付け、名前を付けて保存する
  4. サインインを求められたら、作者のサービスにサインインする
SettingsConnectors1+ Create2https://…3
https://mcp.carbondesignsystem.com/mcp

メニューの名前は、プランや時期によって少し違うことがあります。

選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

できること

このサーバーは、ツール一覧を表示する前にサインインを求めます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月8日にチェック

  • ✓ 合格

    作者とリポジトリが一致

    レジストリ名はドメイン mcp.carbondesignsystem.com で確認済みです(レジストリがドメインの所有を確認しています)

  • … 未チェック

    今もメンテナンスされている

    このリポジトリはまだGitHubから読み取っていません

  • … 未チェック

    ライセンスがある

    このリポジトリはまだGitHubから読み取っていません

  • ✓ 合格

    エンドポイントが応答する

    695ミリ秒で応答(HTTP 401)

  • ✓ 合格

    OAuthでサインイン

    OAuthでのサインインに対応しているため、AIアプリがログイン画面へ案内してくれます

  • … 未チェック

    ツールの説明に隠れた指示がない

    まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります

デザイン・画像・音声のほかのサーバーとの比較i

  • このカテゴリのほかの2792件のうち0%よりスターが多い
  • このカテゴリのほかの2792件のうち48%より最近レジストリに公開
  • 基本チェックの結果が、このカテゴリのほかの2792件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Carbon MCPは安全ですか?

当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか?

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか?

作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。

今もメンテナンスされていますか?

GitHubリポジトリの最終更新は–、最新バージョン(1.14.0)がレジストリに届いたのは29 日前です。

どのアプリで使えますか?

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ(開発者モードのChatGPTなど)でも使えます。

代わりに使えるものは?

同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server

代わりの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i

Figma Context MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

作者:GLips広く使われている↓ 16.1万/週★ 1.6万5 か月前更新

パソコンで動く

Claude Real Video

Let any LLM watch a video locally — and search everything it has ever watched.

作者:HUANGCHIHHUNGLeo広く使われている↓ 1106/週★ 22842 か月前更新

パソコンで動く

Figma MCP Server

The Figma MCP server brings Figma design context directly into your AI workflow.

作者:figma広く使われている★ 215213 か月前更新

クラウドで動く✓ mcp.figma.com

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

Carbon MCP

The Carbon Design System, available to any AI agent.

Carbon MCP is a hosted server that gives AI agents direct access to Carbon's components, icons, charts and documentation through MCP, the open Model Context Protocol standard for connecting AI applications to external tools and data. It runs on IBM Cloud, so any MCP client can connect with a URL and an IBMid sign-in. This repository is where you report issues, request features and get the Carbon Builder skill.

Connect · Carbon Builder skill · Tools · Coverage · Report an issue

Terms of Use for the hosted service · Apache-2.0 for the Carbon Builder skill


Why Carbon MCP

Carbon MCP makes any agentic AI application an instant expert in the Carbon Design System, so teams deliver consistent, high-quality user experiences with greater speed.

BenefitWhat it means
Direct access to CarbonAI agents query the Carbon Design System for the context they need: colors, typography, component source, usage guidelines.
Better generated codeCode examples and documentation from Carbon MCP let AI tools generate high-fidelity Carbon UI code that follows design and development practice.
One answer for the whole teamDesigners, developers and PMs get consistent answers and examples from a shared source of truth, which reduces drift and rework.

Connect

The Carbon MCP server is hosted remotely at https://mcp.carbondesignsystem.com/mcp. Add it to your client as a remote MCP server and sign in with your IBMid when asked.

Clients that read an mcp.json file use this minimal configuration:

{

"mcpServers": { "carbon-mcp": { "type": "streamable-http", "url": "https://mcp.carbondesignsystem.com/mcp" } } }

ClientSetup
IBM BobOnboarding: IBM Bob
Claude DesktopOnboarding: Claude Desktop
CursorOnboarding: Cursor
Figma MakeOnboarding: Figma Make
Claude Code, VS Code, GitHub Copilot and other clientsOnboarding: Other clients
Clients without OAuthToken and session ID

The full onboarding and setup guide covers what to have before you begin, the prerequisites, connecting to the server and every client above.

Token and session ID

If your client does not support OAuth discovery, you can authenticate with a token and session ID instead.

  1. Generate a token and session ID.
  2. Copy your credentials and add them to your Carbon MCP configuration.

Pair it with the Carbon Builder skill

Carbon Builder is a portable AI skill that turns an agent into an expert Carbon Design System engineer. It retrieves live component examples, variants, props and documentation from the Carbon MCP server, generates Carbon React and Web Components code, and builds Carbon Charts across every supported framework.

The server supplies the facts; the skill tells the agent when to ask for them and how to turn the answers into working code. Together they produce better results than either alone.

Install it with the skills CLI, choosing the line for your agent:

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

The CLI supports many more agents; see skills.sh. The skill has its own page at skills.sh/carbon-design-system/carbon-mcp/carbon-builder.

To install without the CLI, download carbon-builder.zip, unzip it, and copy the carbon-builder/ folder to your client's skills location. The skill README lists the path for each client, and the onboarding guide walks through it in Set up your AI client and install the Carbon Builder skill.

Tools

ToolWhat it returns
code_auditA check of your code against Carbon guidelines covering design tokens, component usage, accessibility, layout and best practices.
code_searchCarbon React and Web Components code examples, icons and pictograms, including complete example application files.
docs_searchCarbon Design System and IBM Products documentation, such as component guidance, usage, accessibility and reference material.
get_chartsCarbon Charts code examples for React, Angular, Vue, Svelte, Vanilla JS and HTML.
labs_searchCode examples, props, events and usage docs for Carbon Labs experimental components.

Coverage

Carbon MCP continues to evolve. Current coverage:

CorpusExamplesWhat is indexed
@carbon/reactButton, Tabs, TextInputCode examples and documentation, multiple variants per component, complete props and imports
@carbon/web-componentsbutton, tabs, text-inputCode examples and documentation, multiple variants per component, complete props and imports
Carbon for IBM ProductsTearsheets, PageHeaderCode examples and documentation, multiple variants per component, complete props and imports
Carbon Icons and PictogramsSettings, User, UserAvatarFilledCode examples and documentation, usage
@carbon/ai-chatbasic, custom-element, historyCode examples and documentation, full code examples, complete props and imports
@carbon/chartsChart types, with links to demosChart type descriptions, links to demos, full code examples, complete props and imports
@carbon-labs/*React: AnimatedHeader, Processing, Resizer, UIShell, What's NewCode examples and documentation for preview candidates, multiple variants per component, complete props and imports

The Concepts page describes the content in more detail.

Documentation

DocumentCovers
OverviewCarbon MCP overview and key benefits
ConceptsThe Carbon MCP tools and content coverage
Onboarding and setupAuthentication, connecting common MCP clients, installing the Carbon Builder skill
PromptsPrompting guidance and best practices

| Token conservation | Keeping

冒頭だけを表示しています。続きはリポジトリで読めます

PopNxに聞く