---
title: Carbon MCP
tabs: ['Overview', 'Onboarding and setup', 'Prompts', 'Token conservation']
description:
  Instantly access the Carbon Design System knowledge base via AI assistance
---

import bobDemo from './videos/bob-carbon-mcp-demo.mp4';
import {
  Checkmark,
  CheckmarkFilled,
  CheckmarkOutline,
  SubtractAlt,
} from '@carbon/icons-react';
import { green, red } from '@carbon/colors';
import MONDAY_LOGO from '../../../images/monday.svg';

## Carbon MCP (Public Preview)

Carbon MCP is available as a public preview. The Carbon MCP server provides
knowledge on our core Carbon Design System elements, iconography, pictograms,
guidelines, usage documentation, component libraries across React and Web
Components, as well as the Carbon for IBM Products library.

During this public preview, we are eager to hear from the community on what's
working and what we can optimize. Please consider
[sharing feedback on your experience](https://forms.monday.com/forms/d7f4a23fe080f757e805294d746e515c?r=use1)
to help us improve future releases.

<Row>
  <Column colLg={8}>
    <Video controls src={bobDemo}></Video>
  </Column>
</Row>

IBMers can immediately start using Carbon MCP by following the onboarding
instructions below. Non-IBMers can request access using the link below.

<Row className="resource-card-group">
  <Column colMd={4} colLg={4} noGutterSm>
    <ResourceCard
      subTitle="Onboarding instructions"
      href="/developing/carbon-mcp/onboarding-and-setup/"
      actionIcon="arrowRight">
      <MdxIcon name="carbon" />
    </ResourceCard>
  </Column>
  <Column colMd={4} colLg={4} noGutterSm>
    <ResourceCard
      subTitle="Early Access Sign-up Form (Non IBMers)"
      href="https://wkf.ms/4qaLODl"
      target="_blank">
      <MdxIcon name="monday" />
    </ResourceCard>
  </Column>
</Row>

<PageDescription>

Instantly access the Carbon Design System knowledge base via AI assistance.

</PageDescription>

<AnchorLinks>
  <AnchorLink>Model Context Protocol</AnchorLink>
  <AnchorLink>Why Carbon MCP?</AnchorLink>
  <AnchorLink>MCP tools</AnchorLink>
  <AnchorLink>Resources</AnchorLink>
  <AnchorLink>Summary of content coverage</AnchorLink>
  <AnchorLink>Roadmap</AnchorLink>
</AnchorLinks>

## Model Context Protocol

Model Context Protocol (MCP) is an open-source standard that enables AI agents
or AI applications to securely connect with external tools, data sources, and
workflows through a unified integration layer.

## Why Carbon MCP?

**Instant AI Access to Carbon Design Standards:** Carbon MCP lets AI
applications or agents query the Carbon Design System for colors, typography,
component details, usage guidelines, and other essential context.

**Smarter Code Generation:** Carbon MCP exposes code examples and documentation
that enable AI tools to generate high-fidelity Carbon UI code that follows
design and development best practices.

**Improved Consistency:** Carbon MCP helps designers, developers, and PMs get
consistent answers and examples from a shared source of truth, which reduces
drift and rework.

## MCP tools

Carbon MCP provides these tools to the AI application, which are called as
needed during a session:

`docs_search` Search Carbon Design System and IBM Products documentation,
including component guidance, usage, accessibility, and reference docs.

`code_search` Search Carbon React/Web Components code examples, icons, and
pictograms for complete example application files.

`get_charts` Search Carbon Charts code examples across React, Angular, Vue,
Svelte, Vanilla JS, and HTML.

`labs_search` Search Carbon Labs experimental component code examples and
documentation, including AnimatedHeader, Processing, Resizer, WhatsNew, and the
Labs UIShell.

## Resources

<Row className="resource-card-group">
  <Column colMd={4} colLg={4} noGutterSm>
    <ResourceCard
      subTitle="Carbon MCP Issue & Feature Tracking"
      href="https://github.com/carbon-design-system/carbon-mcp"
      target="_blank">
      <MdxIcon name="github" />
    </ResourceCard>
  </Column>
  <Column colMd={4} colLg={4} noGutterSm>
    <ResourceCard
      subTitle="Share Feedback"
      href="https://wkf.ms/4tA9TGT"
      target="_blank">
      <MdxIcon name="monday" />
    </ResourceCard>
  </Column>
</Row>

## Summary of content coverage

Details about current coverage is provided below:

#### <CheckmarkFilled size={16} color={green[40]} /> `@carbon/react`

- Code examples and documentation
- Example: Button, Tabs, TextInput, etc.
- Multiple variants per component
- Complete props and imports

#### <CheckmarkFilled size={16} color={green[40]} /> `@carbon/web-components`

- Code examples and documentation
- Example: button, tabs, text-input, etc.
- Multiple variants per component
- Complete props and imports

#### <CheckmarkFilled size={16} color={green[40]} /> Carbon for IBM Products

- Code examples and documentation
- Example: Tearsheets, PageHeader, etc.
- Multiple variants per component
- Complete props and imports

#### <CheckmarkFilled size={16} color={green[40]} /> Carbon Icons and Pictograms

- Code examples and documentation
- Example: Settings, User, UserAvatarFilled, etc.
- Usage

#### <CheckmarkFilled size={16} color={green[40]} /> `@carbon/ai-chat`

- Code examples and documentation
- Example: basic, custom-element, history, etc.
- Full code examples
- Complete props and imports

#### <CheckmarkFilled size={16} color={green[40]} /> `@carbon/charts`

- Chart type descriptions
- Links to demos
- Full code examples
- Complete props and imports

#### <CheckmarkFilled size={16} color={green[40]} /> Carbon Labs (`@carbon/labs-react`)

- Code examples and documentation
- Example: AnimatedHeader, Processing, Resizer, WhatsNew, Labs UIShell
- Full code examples
- Complete props and imports

## Roadmap

Carbon MCP continues to evolve. We will be adding new tools, expanding content
coverage, and optimizing the experience based on user feedback.

#### Enablement coming soon

- Carbon Patterns context
- Agentic Carbon migration, supporting migrations from Carbon v10 to v11 and
  from other design systems to Carbon