Carbon MCP

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 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",
      "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.

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

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.