Carbon MCP server URL
The IBM Cloud deployment of the Carbon MCP is available at https://mcp.carbondesignsystem.com/mcp
carbon-mcp/setup
31 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Carbon MCP authentication requirements
To use Carbon MCP, you need an IBMid (w3id for IBMers), or a functional ID for IBM product teams. IBMers will be provided authentication credentials immediately upon signing in. All other users will be prompted to request access and will receive an activation link via email. The credentials needed are a token and session ID.
Claude Code CLI command to add Carbon MCP
Use the Claude Code CLI with the command: claude mcp add-json carbon-mcp '{"type":"http","url":"https://mcp.carbondesignsystem.com/mcp","headers":{"Authorization":"Bearer <TOKEN>","X-MCP-Session":"<SESSION>"}}' Replace <TOKEN> and <SESSION> with actual Carbon MCP auth credentials. Verify the connection by running claude mcp list
Claude Desktop Carbon MCP Extension download
The Carbon MCP Claude Desktop extension can be downloaded from /developing/carbon-mcp/files/carbon-mcp-claude-extension.mcpb Install it by opening Settings > Extensions > Advanced Settings, clicking Install Extension, and selecting the downloaded file.
Claude Desktop Carbon MCP as Custom Connector setup
To add Carbon MCP as a Custom Connector in Claude Desktop: Open Settings > Connectors, click Add Custom Connector, enter 'carbon-mcp' as the name, enter https://mcp.carbondesignsystem.com/mcp in the Remote MCP server URL field, and click Add.
Cursor MCP configuration
To configure Carbon MCP in Cursor, add the following to your MCP settings: {"mcpServers":{"carbon-mcp":{"type":"streamable-http","url":"https://mcp.carbondesignsystem.com/mcp","disabled":false,"timeout":600,"headers":{"Authorization":"Bearer <TOKEN>","X-MCP-Session":"<SESSION>"},"alwaysAllow":["code_search","docs_search"]}}} Replace <TOKEN> and <SESSION> with actual credentials, save, and restart Cursor.
Codex configuration for Carbon MCP
To set up Carbon MCP in Codex, edit ~/.codex/config.toml and add: [mcp_servers.carbon_mcp] enabled = true url = "https://mcp.carbondesignsystem.com/mcp" enabled_tools = ["code_search", "docs_search", "get_charts"] [mcp_servers.carbon_mcp.http_headers] Authorization = "Bearer <TOKEN>" X-MCP-Session = "<SESSION>" Replace <TOKEN> and <SESSION> with actual credentials, save, and restart Codex.
Figma Make Carbon MCP setup for IBMers
For IBMers using Figma Make: Open Connectors, select the IBM tab, click Connect next to Carbon MCP, sign in with IBMid when the browser opens, toggle on Enable write tools, and set doc_search, code_search, and get_charts to Always run. Start a Make by creating a new file, selecting a LLM model (Gemini uses fewer tokens; Claude Opus 4.6+ produces more accurate code), clicking Add context to select Carbon MCP, attaching your design input, and including the suggested user prompt. Switch to Code view and paste the full contents of GUIDELINES.txt into GUIDELINES.md.
Figma Make Carbon MCP setup for non-IBMers
For non-IBMers using Figma Make (requires Figma admin to enable user creation of custom connectors): Open Connectors, select Created by you tab, click Create connector, enter carbon-mcp as the name, enter https://mcp.carbondesignsystem.com/mcp in the MCP server URL field, click Create, then click Connect. Sign in with your Figma account when prompted. Toggle on Enable write tools and set doc_search, code_search, and get_charts to Always run. Start a Make the same way as IBMers.
GitHub Coding Agent MCP configuration
To configure Carbon MCP for GitHub Coding Agent, add the following to your MCP configuration in repository Settings > Copilot > Coding agent: {"mcpServers":{"carbon-mcp":{"type":"http","url":"https://mcp.carbondesignsystem.com/mcp","headers":{"Authorization":"Bearer <TOKEN>","X-MCP-Session":"<SESSION>"},"tools":["code_search","docs_search"]}}} Replace <TOKEN> and <SESSION> with actual credentials and click Save MCP configuration.
VS Code MCP installation via CLI
To set up Carbon MCP in VS Code using the CLI, run: code --add-mcp '{"name":"carbon-mcp","type":"http","url":"https://mcp.carbondesignsystem.com/mcp","headers":{"Authorization":"Bearer <TOKEN>","X-MCP-Session":"<SESSION>"}}' Replace <TOKEN> and <SESSION> with actual Carbon MCP auth credentials.
carbon-builder skill purpose
The carbon-builder skill provides Carbon-specific context that guides AI agents to follow Carbon conventions, use the right components, and produce consistent output. It should be installed for best results with Carbon MCP.
Bob carbon-builder skill installation paths
The carbon-builder skill can be installed in Bob in two ways: Project-scoped at .bob/skills/ (recommended for teams, requires committing to repository so all developers have it) or Global at ~/.bob/skills/ (available in all projects on the machine). Verify installation by running /list-skills inside Bob. Bob reads name and description from SKILL.md to determine when to activate the skill.
Claude Code carbon-builder skill installation paths
Claude Code discovers skills automatically from .claude/skills/ at project root. Download and unzip carbon-builder, then place it in .claude/skills/ (project-scoped, recommended for teams and version-tracked) or ~/.claude/skills/ (global, available in all projects on the machine). Commit .claude/skills/carbon-builder/ to repository for team access without separate installations.
Claude Desktop carbon-builder skill installation
To install carbon-builder skill in Claude Desktop: download the carbon-builder.zip file (no need to unzip), open Settings > Capabilities and ensure Cloud code execution and file creation is enabled, navigate to Customize > Skills, click + to Upload a skill, and select the downloaded carbon-builder.zip. Claude Desktop will activate the skill automatically. Custom skills are private to each account; each team member must upload individually.
Cursor carbon-builder rule file format
Cursor uses MDC-format rule files in .cursor/rules/. Create .cursor/rules/carbon-builder.mdc with frontmatter containing description and alwaysApply: false, then paste the body of SKILL.md (everything below the closing --- of the frontmatter) and any reference file content. Cursor does not auto-load the references/ directory, so inline the content of reference files directly into the MDC file or create additional .mdc rule files.
GitHub Coding Agent carbon-builder skill installation
GitHub Copilot coding agent supports Agent Skills from .github/skills/ in the repository (no global install location). Download and unzip carbon-builder, then copy to /path/to/your-project/.github/skills/. Commit .github/skills/carbon-builder/ to the repository. GitHub Copilot reads name and description from SKILL.md and loads the skill automatically when the current task matches the skill's purpose.
VS Code carbon-builder skill installation paths
VS Code supports Agent Skills in project locations (.github/skills/, .claude/skills/, or .agents/skills/) and personal locations (~/.copilot/skills/, ~/.claude/skills/, or ~/.agents/skills/). Download and unzip carbon-builder. Place in .github/skills/ (project-scoped, recommended for teams, version-tracked) or ~/.copilot/skills/ (global, available across all local projects). Verify by opening Command Palette, running Chat: Open Chat Customizations, and checking the Skills tab for carbon-builder.
llms.txt file location
An llms.txt file is available at /llms.txt. It is a structured index of Carbon Design System documentation, components, and source repositories for AI tools and LLMs.
Figma Make model recommendations for Carbon
When using Figma Make with Carbon MCP, Gemini was observed to consume fewer tokens, while Anthropic's Claude Opus 4.6 model (or later) tended to produce more accurate and complete code output.
Bob warning about project-scoped token storage
It is not recommended to choose 'Project (current workspace)' when installing Carbon MCP in Bob, as it can potentially introduce the risk of your token being committed to your repository.
Bob Carbon MCP installation steps
To install Carbon MCP in Bob: select the settings icon in the upper right, select the MCP tab, search for 'Carbon', click Install, enter your Carbon access token and session ID in the modal dialogue, and click Install. Do not choose 'Project (current workspace)' to avoid token being committed to repository.
Carbon React package contents
The @carbon/react package includes everything needed: component styles, icons, grid, theming and type. If this package is installed, you do not need to separately install styles, grid, theme, icons or type packages.
Basic React package Sass import
To use styles with @carbon/react, include the following in your index.scss: @use '@carbon/react';
Component-specific Sass import
To include styles for a specific component, use: @use '@carbon/react/scss/components/[componentname]';
GlobalTheme component usage
The GlobalTheme component makes it easy to change the default theme by using it as a wrapper in your app and passing a theme prop value of white, g10, g90, or g100.
Zoned theming with Theme component
Use the Theme component to include zoned themes, which allows different parts of an application to have different themes.
Custom theme with token overrides example
To create a custom theme or override theme tokens, use @use '@carbon/react/scss/theme' with the $theme parameter to add new tokens or redefine existing ones. Component tokens can be overridden using @use '@carbon/react/scss/components/[component]/tokens'. Access custom variables via the theme.get() mixin.
Sass modules required for common assets
Common Sass modules and their @use statements for @carbon/react: Theme tokens use @use '@carbon/react/scss/theme'; Theme mixins use @use '@carbon/react/scss/themes'; Design language color tokens use @use '@carbon/react/scss/colors'; Spacing tokens use @use '@carbon/react/scss/spacing'; Breakpoint mixins use @use '@carbon/react/scss/breakpoint'; Motion tokens and functions use @use '@carbon/react/scss/motion'; Rem and other convert functions use @use '@carbon/react/scss/utilities/convert'; Z-index helper use @use '@carbon/react/scss/utilities/z-index'; Focus outline helper use @use '@carbon/react/scss/utilities/focus-outline'; Transform rotate helper use @use '@carbon/react/scss/utilities/rotate'; Skeleton animation helper use @use '@carbon/react/scss/utilities/skeleton'. For @carbon/styles package, replace 'react' with 'styles' in all paths.
Sass namespace omission with as *
Using 'as *' at the end of a @use statement omits the default namespace provided by Sass. For example, @use '@carbon/react/scss/theme' as *; allows using tokens like $layer directly without prefixing them with the module name.
Feature flags to 'with' syntax migration
In v11, configuration options that were previously set before importing Carbon should now be provided using the 'with' syntax: @use '@carbon/react' with ($css--default-type: true, $css--reset: true);. Feature flags used in v10 can be safely removed in v11.