carbon-mcp
Health Warn
- No license — Repository has no license file
- Description — Repository has a description
- Active repo — Last push 0 days ago
- Community trust — 38 GitHub stars
Code Pass
- Code scan — Scanned 6 files during light audit, no dangerous patterns found
Permissions Pass
- Permissions — No dangerous permissions requested
No AI report is available for this listing yet.
Carbon MCP provides tools to explore Carbon Design System components, tokens, and icons, answer documentation questions, and generate consistent UI code.

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.
| Benefit | What it means |
|---|---|
| Direct access to Carbon | AI agents query the Carbon Design System for the context they need: colors, typography, component source, usage guidelines. |
| Better generated code | Code 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 team | Designers, 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 athttps://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",
"oauth": true,
"alwaysAllow": []
}
}
}
| Client | Setup |
|---|---|
| IBM Bob | Onboarding: IBM Bob |
| Claude Desktop | Onboarding: Claude Desktop |
| Cursor | Onboarding: Cursor |
| Figma Make | Onboarding: Figma Make |
| Claude Code, VS Code, GitHub Copilot and other clients | Onboarding: Other clients |
| Clients without OAuth | Token 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.
- Generate a token and session ID.
- 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, downloadcarbon-builder.zip, unzip it, and copy thecarbon-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
| Tool | What it returns |
|---|---|
code_audit |
A check of your code against Carbon guidelines covering design tokens, component usage, accessibility, layout and best practices. |
code_search |
Carbon React and Web Components code examples, icons and pictograms, including complete example application files. |
docs_search |
Carbon Design System and IBM Products documentation, such as component guidance, usage, accessibility and reference material. |
get_charts |
Carbon Charts code examples for React, Angular, Vue, Svelte, Vanilla JS and HTML. |
labs_search |
Code examples, props, events and usage docs for Carbon Labs experimental components. |
Coverage
Carbon MCP continues to evolve. Current coverage:
| Corpus | Examples | What is indexed |
|---|---|---|
@carbon/react |
Button, Tabs, TextInput | Code examples and documentation, multiple variants per component, complete props and imports |
@carbon/web-components |
button, tabs, text-input | Code examples and documentation, multiple variants per component, complete props and imports |
| Carbon for IBM Products | Tearsheets, PageHeader | Code examples and documentation, multiple variants per component, complete props and imports |
| Carbon Icons and Pictograms | Settings, User, UserAvatarFilled | Code examples and documentation, usage |
@carbon/ai-chat |
basic, custom-element, history | Code examples and documentation, full code examples, complete props and imports |
@carbon/charts |
Chart types, with links to demos | Chart type descriptions, links to demos, full code examples, complete props and imports |
@carbon-labs/* |
React: AnimatedHeader, Processing, Resizer, UIShell, What's New | Code examples and documentation for preview candidates, multiple variants per component, complete props and imports |
The Concepts page
describes the content in more detail.
Documentation
| Document | Covers |
|---|---|
| Overview | Carbon MCP overview and key benefits |
| Concepts | The Carbon MCP tools and content coverage |
| Onboarding and setup | Authentication, connecting common MCP clients, installing the Carbon Builder skill |
| Prompts | Prompting guidance and best practices |
| Token conservation | Keeping AI workflows fast and cost-efficient by cutting unnecessary context and responses |
| Terms of Use | Terms for the IBM Cloud-hosted Carbon MCP service |
| Support | Getting help |
| Code of conduct | How 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.
Reviews (0)
Sign in to leave a review.
Leave a reviewNo results found