Carbon MCP

com.carbondesignsystem.mcp由 mcp.carbondesignsystem.com 發布官方發布者v1.14.0更新於 Oct 24, 2026

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

已驗證Streamable HTTP可網頁執行知識與記憶開發者工具

概覽

AI 產生的概覽

託管式 Carbon 設計系統伺服器,讓助理查詢 Carbon 元件、權杖、圖示、圖表與文件,並依 Carbon 規範審查程式碼。

可以做什麼
  • 搜尋 Carbon React 與 Web Components 的程式碼範例、圖示和象形圖
  • 檢索 Carbon 設計系統與 IBM Products 的文件、用法與無障礙指引
  • 取得 React、Angular、Vue、Svelte、原生 JS 和 HTML 的 Carbon Charts 範例
  • 查詢 Carbon Labs 實驗性元件的程式碼範例、屬性、事件與用法文件
  • 依設計權杖、元件用法、無障礙與版面配置等 Carbon 規範審查程式碼
適用情境
在使用 Carbon 設計系統建置或審查介面時,希望助理取得真實的元件範例、屬性與指引,而不是憑空生成。也適合希望設計師、開發者與產品經理從同一來源取得一致答案的團隊。
執行需求
需要指向託管 streamable HTTP 端點的遠端 MCP 用戶端,無需本機安裝套件。透過 OAuth 以 IBMid 登入,或不支援 OAuth 探索的用戶端改用產生的權杖與工作階段 ID。需要能連線至該託管服務的網路。
安裝前請注意
需要 IBMid 登入或權杖與工作階段 ID 憑證,應避免寫入共用設定。託管服務受其自身使用條款約束。用於審查的查詢與程式碼會傳送至 IBM Cloud 上的遠端服務。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Carbon MCP,將其新增到工作區。
  2. 連接 所需的 憑證。它們會被私密儲存,絕不會在公開頁面上展示。
  3. 為需要使用其工具的對話啟用該服務。

Web executable,透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式,或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南,先向你展示發布者、端點和登入方式,經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/com.carbondesignsystem.mcp%2Fcarbon-mcp/install.md,並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前,先告訴我它的發布者、端點和登入方式,等我確認。不要把 API 金鑰寫進命令或我會提交的檔案;問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。 客戶端會在首次連接時完成 OAuth 登入。

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

README

[Carbon MCP: the Carbon Design System, available to any AI agent. Components, icons, charts and documentation served to AI clients from one hosted MCP server.]

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:

json
{  "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:

bash
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a bobnpx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a claude-codenpx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a cursornpx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a codexnpx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a github-copilotnpx 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 conservationKeeping AI workflows fast and cost-efficient by cutting unnecessary context and responses
Terms of UseTerms for the IBM Cloud-hosted Carbon MCP service
SupportGetting help
Code of conductHow we expect everyone to behave in this project

Issues and support

Open an issue to report a bug, request a feature or ask for help. Templates guide each one.

來源:README.md,提交 c8af755

工具

0
該伺服器需要登入,因此 SourceWeft 無法在沒有帳號的情況下讀取其工具,也未收錄。已連接帳號所能看到的內容可能因帳號及其權限而異。

版本歷史

1
  1. v1.14.0最新Oct 10, 2026

評分

已滿足適用檢查項的 75%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list,或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

    請在儲存庫或註冊中心條目中宣告授權條款。