Carbon Design System

Concepts

Last updated Sep 25, 2026

Understand the tools and content sources that enable Carbon MCP to retrieve information from the Carbon Design System.

Concepts

MCP tools

MCP tools are functions that Carbon MCP exposes to your AI client. When you ask your AI to build a Carbon component or check your code against Carbon guidelines, it calls these tools automatically to retrieve accurate, up-to-date information from the Carbon Design System.

  • code_audit Validates code against Carbon guidelines for design tokens, component usage, accessibility, layout, and best practices.
  • code_search Searches Carbon React and Web Components code examples, icons, and pictograms for complete example application files.
  • docs_search Searches Carbon Design System and IBM Products documentation, including component guidance, usage, accessibility, and reference docs.
  • get_charts Searches Carbon Charts code examples across React, Angular, Vue, Svelte, Vanilla JS, and HTML.
  • labs_search Searches Carbon Labs experimental components for code examples, props, events, and usage documentation.

Content coverage

Content coverage refers to the libraries and packages that Carbon MCP can search. When your AI calls a tool, it retrieves content from these sources.

  • @carbon/react Code examples and documentation for Carbon React components such as Button, Tabs, and TextInput. Includes multiple variants per component, complete props, and imports.
  • @carbon/web-components Code examples and documentation for Carbon Web Components such as button, tabs, and text-input. Includes multiple variants per component, complete props, and imports.
  • Carbon for IBM Products Code examples and documentation for IBM Products components such as Tearsheets and PageHeader. Includes multiple variants per component, complete props, and imports.
  • Carbon Icons and Pictograms Code examples and usage documentation for icons such as Settings, User, and UserAvatarFilled. Includes usage guidance and import paths.
  • @carbon/ai-chat Code examples and documentation for AI chat components including basic, custom-element, and history patterns. Includes full code examples, complete props, and imports.
  • @carbon/charts Chart type descriptions, links to demos, full code examples, complete props, and imports across React, Angular, Vue, Svelte, Vanilla JS, and HTML.
  • @carbon-labs/* Code examples and documentation for Carbon Labs experimental components including AnimatedHeader, Processing, Resizer, UIShell, and What's New. Includes multiple variants, complete props, and imports.