feat(onboarding): add cli and button options for including carbon-mcp (carbon-design-system#4836)

Author: ariellalgilmore

src/pages/developing/carbon-mcp/onboarding-and-setup.mdx

@@ -164,35 +164,19 @@ current Bob session.
 
 <AccordionItem title="Claude Code">
 
-- Edit the Claude Code configuration file if it exists, else create the file.
-  For macOS/Linux, the configuration file is located
-  `~/.config/claude-code/config.json`
-- Insert the following configuration into your config.json file:
-  <br />
-  <br />
+- Use the Claude Code CLI and replace the `<TOKEN>` and `<SESSION>` with your
+  Carbon MCP auth credentials
 
-```markdown
-{ "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"] } } }
-```
-
-<br />
 <br />
 
-- Replace `<TOKEN>` and `<SESSION>` with your actual Carbon MCP auth credentials
-- Save and close the file
-- Quit and relaunch Claude Code
-- Verify that Claude Code recognizes Carbon MCP by running this command: <br/>
-  `claude-code --list-mcp-servers`
-- You should see Carbon MCP listed:
+```bash
+claude mcp add-json carbon-mcp '{"type":"http","url":"https://mcp.carbondesignsystem.com/mcp","headers":{"Authorization":"Bearer <TOKEN>","X-MCP-Session":"<SESSION>"}}'
+```
 
 <br />
-![Carbon MCP Claude connected to Claude desktop](./images/carbon-mcp-connected-to-claude-code.png)
 
-<br />
-<br />
+- Verify that Claude Code recognizes Carbon MCP by running `claude mcp list`
+
 </AccordionItem>
 
 <AccordionItem title="Claude Desktop">
@@ -238,8 +222,9 @@ This section describes how to make both connections.
 </AccordionItem>
 
 <AccordionItem title="Cursor">
+[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=carbon-mcp&config=eyJ0eXBlIjoic3RyZWFtYWJsZS1odHRwIiwidXJsIjoiaHR0cHM6Ly9tY3AuY2FyYm9uZGVzaWduc3lzdGVtLmNvbS9tY3AiLCJkaXNhYmxlZCI6ZmFsc2UsInRpbWVvdXQiOjYwMCwiaGVhZGVycyI6eyJBdXRob3JpemF0aW9uIjoiIiwiWC1NQ1AtU2Vzc2lvbiI6IiJ9LCJhbHdheXNBbGxvdyI6WyJjb2RlX3NlYXJjaCIsImRvY3Nfc2VhcmNoIl19)
 
-- Open the command palette
+- Or manually open the command palette
 - Select “View: Open MCP Settings”
 - Click on “Add custom MCP”
 - It will open a file with your MCP servers where you can add the following
@@ -287,32 +272,19 @@ This section describes how to make both connections.
 
 <AccordionItem title="VS Code">
 
-_Support for MCP in VS Code requires a recent version of VS Code that comes with
-Copilot Chat installed. Go to Settings and search for “Copilot” to confirm
-Copilot Chat is enabled._
+[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install_carbon--mcp-0098FF?style=flat&logo=visualstudiocode&logoColor=ffffff)](vscode:mcp/install?%7B%22name%22%3A%22carbon-mcp%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.carbondesignsystem.com%2Fmcp%22%2C%22headers%22%3A%7B%22Authorization%22%3A%22Bearer%20%24%7Binput%3Atoken%7D%22%2C%22X-MCP-Session%22%3A%22%24%7Binput%3Asession%7D%22%7D%2C%22inputs%22%3A%5B%7B%22id%22%3A%22token%22%2C%22type%22%3A%22promptString%22%2C%22description%22%3A%22Carbon%20MCP%20Token%22%2C%22password%22%3Atrue%7D%2C%7B%22id%22%3A%22session%22%2C%22type%22%3A%22promptString%22%2C%22description%22%3A%22Carbon%20MCP%20Session%20ID%22%7D%5D%7D)
 
-- Open the Command Palette
-- Select “Copilot: Open MCP Settings”
-- Click on “Add custom MCP”
-- It will open a JSON file with your MCP servers where you can add the following
-  configuration:
+- Or use VS Code CLI and replace the `<TOKEN>` and `<SESSION>` with your Carbon
+  MCP auth credentials
 
-  <br />
+<br />
 
-```markdown
-{ "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"] } } }
+```bash
+code --add-mcp '{"name":"carbon-mcp","type":"http","url":"https://mcp.carbondesignsystem.com/mcp","headers":{"Authorization":"Bearer <TOKEN>","X-MCP-Session":"<SESSION>"}}'
 ```
 
-<br />
 <br />
 
-- Replace `<TOKEN>` and `<SESSION>` with your actual Carbon MCP auth credentials
-- Save and close the file
-- Quit and relaunch VS Code
-
 </AccordionItem>
 
 <AccordionItem title="Other clients">
@@ -323,6 +295,10 @@ If the MCP client you are using is not listed, refer to their documentation for
 </AccordionItem>
 </Accordion>
 
+Additionally, an `llms.txt` file is available [here](/llms.txt) — a structured
+index of Carbon Design System documentation, components, and source repositories
+for AI tools and LLMs.
+
 ## Step 4: Adding the client system prompt
 
 Some MCP clients let you set a Carbon MCP system prompt. When available, enable

static/llms.txt

@@ -0,0 +1,160 @@
+# Carbon Design System
+
+> Carbon is IBM's open source design system for products and digital experiences. Built on the IBM Design Language, it provides working code, design tools, resources, and guidelines for creating consistent UI.
+
+## Getting Started
+
+- [Overview](https://carbondesignsystem.com/): Introduction to Carbon Design System
+- [All Systems](https://carbondesignsystem.com/all-systems/): Overview of all IBM design systems
+- [Designing](https://carbondesignsystem.com/designing/get-started/): Getting started for designers
+- [Developing](https://carbondesignsystem.com/developing/get-started/): Getting started for developers
+
+## Foundations
+
+- [Color](https://carbondesignsystem.com/foundations/color/overview/): Color usage and tokens
+- [Grid](https://carbondesignsystem.com/foundations/grid/overview/): Layout grid system
+- [Icons](https://carbondesignsystem.com/foundations/icons/library/): Icon library
+- [Motion](https://carbondesignsystem.com/foundations/motion/overview/): Animation and motion guidelines
+- [Pictograms](https://carbondesignsystem.com/foundations/pictograms/library/): Pictogram library
+- [Shape](https://carbondesignsystem.com/foundations/shape/overview/): Shape tokens and usage
+- [Spacing](https://carbondesignsystem.com/foundations/spacing/overview/): Spacing scale and tokens
+- [Themes](https://carbondesignsystem.com/foundations/themes/overview/): Theming and tokens
+- [Typography](https://carbondesignsystem.com/foundations/typography/overview/): Type scale and usage
+- [2x Grid](https://carbondesignsystem.com/foundations/2x-grid/overview/): 2x Grid system
+
+## Components
+
+- [Overview](https://carbondesignsystem.com/components/overview/components/): All components overview
+- [Accordion](https://carbondesignsystem.com/components/accordion/usage/): Expandable/collapsible sections
+- [AI Label](https://carbondesignsystem.com/components/ai-label/usage/): AI-generated content label
+- [AI Skeleton](https://carbondesignsystem.com/components/ai-skeleton/usage/): Skeleton loader for AI content
+- [Breadcrumb](https://carbondesignsystem.com/components/breadcrumb/usage/): Navigation breadcrumb trail
+- [Button](https://carbondesignsystem.com/components/button/usage/): Button variants and usage
+- [Checkbox](https://carbondesignsystem.com/components/checkbox/usage/): Checkbox input
+- [Code Snippet](https://carbondesignsystem.com/components/code-snippet/usage/): Inline and block code display
+- [Combobox](https://carbondesignsystem.com/components/combobox/usage/): Searchable dropdown
+- [Content Switcher](https://carbondesignsystem.com/components/content-switcher/usage/): Toggle between content views
+- [Context Menu](https://carbondesignsystem.com/components/context-menu/usage/): Right-click context menu
+- [Data Table](https://carbondesignsystem.com/components/data-table/usage/): Tabular data display
+- [Date Picker](https://carbondesignsystem.com/components/date-picker/usage/): Date selection input
+- [Dropdown](https://carbondesignsystem.com/components/dropdown/usage/): Select from a list
+- [File Uploader](https://carbondesignsystem.com/components/file-uploader/usage/): File upload component
+- [Form](https://carbondesignsystem.com/components/form/usage/): Form layout and structure
+- [Inline Loading](https://carbondesignsystem.com/components/inline-loading/usage/): Inline loading state
+- [Link](https://carbondesignsystem.com/components/link/usage/): Hyperlink component
+- [List](https://carbondesignsystem.com/components/list/usage/): Ordered and unordered lists
+- [Loading](https://carbondesignsystem.com/components/loading/usage/): Loading spinner
+- [Menu](https://carbondesignsystem.com/components/menu/usage/): Menu and menu items
+- [Modal](https://carbondesignsystem.com/components/modal/usage/): Dialog overlay
+- [Multiselect](https://carbondesignsystem.com/components/multi-select/usage/): Select multiple items
+- [Notification](https://carbondesignsystem.com/components/notification/usage/): Alert and notification banners
+- [Number Input](https://carbondesignsystem.com/components/number-input/usage/): Numeric input field
+- [Overflow Menu](https://carbondesignsystem.com/components/overflow-menu/usage/): Additional options menu
+- [Pagination](https://carbondesignsystem.com/components/pagination/usage/): Page navigation
+- [Popover](https://carbondesignsystem.com/components/popover/usage/): Floating content panel
+- [Progress Bar](https://carbondesignsystem.com/components/progress-bar/usage/): Task progress indicator
+- [Progress Indicator](https://carbondesignsystem.com/components/progress-indicator/usage/): Multi-step progress
+- [Radio Button](https://carbondesignsystem.com/components/radio-button/usage/): Single-select radio input
+- [Search](https://carbondesignsystem.com/components/search/usage/): Search input field
+- [Select](https://carbondesignsystem.com/components/select/usage/): Native select dropdown
+- [Side Panel](https://carbondesignsystem.com/components/side-panel/usage/): Sliding side panel
+- [Skeleton](https://carbondesignsystem.com/components/skeleton/usage/): Loading skeleton placeholder
+- [Slider](https://carbondesignsystem.com/components/slider/usage/): Range slider input
+- [Stack](https://carbondesignsystem.com/components/stack/usage/): Layout stack utility
+- [Structured List](https://carbondesignsystem.com/components/structured-list/usage/): Structured data list
+- [Tabs](https://carbondesignsystem.com/components/tabs/usage/): Tabbed content navigation
+- [Tag](https://carbondesignsystem.com/components/tag/usage/): Label and category tags
+- [Text Area](https://carbondesignsystem.com/components/text-area/usage/): Multi-line text input
+- [Text Input](https://carbondesignsystem.com/components/text-input/usage/): Single-line text input
+- [Tile](https://carbondesignsystem.com/components/tile/usage/): Clickable tile component
+- [Time Picker](https://carbondesignsystem.com/components/time-picker/usage/): Time selection input
+- [Toggle](https://carbondesignsystem.com/components/toggle/usage/): On/off toggle switch
+- [Toggletip](https://carbondesignsystem.com/components/toggletip/usage/): Interactive tooltip
+- [Toolbar](https://carbondesignsystem.com/components/toolbar/usage/): Action toolbar
+- [Tooltip](https://carbondesignsystem.com/components/tooltip/usage/): Hover tooltip
+- [Tree View](https://carbondesignsystem.com/components/tree-view/usage/): Hierarchical tree navigation
+- [UI Shell](https://carbondesignsystem.com/components/UI-shell-header/usage/): App shell header, side nav, and footer
+
+## Patterns
+
+- [Common Actions](https://carbondesignsystem.com/patterns/common-actions/): Standard UI actions
+- [Dialogs](https://carbondesignsystem.com/patterns/dialog-patterns/): Dialog and modal patterns
+- [Disclosures](https://carbondesignsystem.com/patterns/disclosures/): Disclosure patterns
+- [Empty States](https://carbondesignsystem.com/patterns/empty-states-pattern/): No content state handling
+- [Filtering](https://carbondesignsystem.com/patterns/filtering/): Data filtering patterns
+- [Forms](https://carbondesignsystem.com/patterns/forms-pattern/): Form design patterns
+- [Global Header](https://carbondesignsystem.com/patterns/global-header/): Site-wide header pattern
+- [Loading](https://carbondesignsystem.com/patterns/loading-pattern/): Loading state patterns
+- [Login](https://carbondesignsystem.com/patterns/login-pattern/): Authentication patterns
+- [Notifications](https://carbondesignsystem.com/patterns/notification-pattern/): Notification patterns
+- [Overflow Content](https://carbondesignsystem.com/patterns/overflow-content/): Handling overflow
+- [Pagination](https://carbondesignsystem.com/patterns/pagination-pattern/): Pagination patterns
+- [Placeholder Loading](https://carbondesignsystem.com/patterns/placeholder-loading-pattern/): Skeleton loading
+- [Search](https://carbondesignsystem.com/patterns/search-pattern/): Search UX patterns
+- [Status Indicators](https://carbondesignsystem.com/patterns/status-indicator-pattern/): Status display patterns
+
+## Data Visualization
+
+- [Overview](https://carbondesignsystem.com/data-visualization/getting-started/): Data viz overview
+- [Chart Types](https://carbondesignsystem.com/data-visualization/chart-types/): Available chart types
+- [Color Palettes](https://carbondesignsystem.com/data-visualization/color-palettes/): Viz color system
+- [Axes & Labels](https://carbondesignsystem.com/data-visualization/axes-and-labels/): Chart axes guidance
+
+## Carbon Charts
+
+- [Overview](https://charts.carbondesignsystem.com/): Carbon Charts component library (React, Vue, Angular, Svelte, Vanilla)
+
+## Frameworks
+
+- [React (@carbon/react)](https://carbondesignsystem.com/developing/frameworks/react/): React implementation
+- [Web Components (@carbon/web-components)](https://carbondesignsystem.com/developing/frameworks/web-components/): Web Components implementation
+- [Angular](https://angular.carbondesignsystem.com/documentation/): Angular implementation
+- [Vue](https://carbondesignsystem.com/developing/frameworks/vue/): Community Vue implementation
+
+## Source Code — carbon-design-system/carbon
+
+> Core Carbon packages: React components, Web Components, icons, pictograms, tokens, and styles.
+
+- [Repository](https://github.com/carbon-design-system/carbon): Main monorepo
+- [React (@carbon/react)](https://github.com/carbon-design-system/carbon/tree/main/packages/react): React component source code
+- [Web Components (@carbon/web-components)](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components): Web Components source code
+- [Icons (@carbon/icons)](https://github.com/carbon-design-system/carbon/tree/main/packages/icons): Icon SVG source files
+- [Icons React (@carbon/icons-react)](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react): React icon components
+- [Icons Web Components (@carbon/icons-element)](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-element): Web Component icon elements
+- [Pictograms (@carbon/pictograms)](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms): Pictogram SVG source files
+- [Pictograms React (@carbon/pictograms-react)](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms-react): React pictogram components
+- [Styles (@carbon/styles)](https://github.com/carbon-design-system/carbon/tree/main/packages/styles): CSS and Sass styles
+- [Tokens (@carbon/tokens)](https://github.com/carbon-design-system/carbon/tree/main/packages/tokens): Design tokens
+- [Motion (@carbon/motion)](https://github.com/carbon-design-system/carbon/tree/main/packages/motion): Motion tokens
+- [Type (@carbon/type)](https://github.com/carbon-design-system/carbon/tree/main/packages/type): Typography tokens and utilities
+- [Layout (@carbon/layout)](https://github.com/carbon-design-system/carbon/tree/main/packages/layout): Spacing and grid tokens
+- [Themes (@carbon/themes)](https://github.com/carbon-design-system/carbon/tree/main/packages/themes): Theme definitions (White, G10, G90, G100)
+- [Examples](https://github.com/carbon-design-system/carbon/tree/main/examples): Framework usage examples
+
+## Source Code — carbon-design-system/ibm-products
+
+> Extended Carbon-powered component library for IBM product teams, including advanced patterns and enterprise-grade components.
+
+- [Repository](https://github.com/carbon-design-system/ibm-products): IBM Products monorepo
+- [IBM Products React (@carbon/ibm-products)](https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products): React components for IBM Products
+- [IBM Products Web Components (@carbon/ibm-products-web-components)](https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components): Web Components for IBM Products
+- [Storybook](https://ibm-products.carbondesignsystem.com): Interactive component demos
+
+## Source Code — carbon-design-system/carbon-ai-chat
+
+> Carbon AI Chat component library for building AI-powered chat interfaces, with React and Web Component implementations.
+
+- [Repository](https://github.com/carbon-design-system/carbon-ai-chat): Carbon AI Chat monorepo
+- [Packages](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/packages): React and Web Component chat packages
+- [Examples](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/examples): Usage examples for React and Web Components
+- [Demo](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/demo): Live demo source
+- [Docs](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/docs): Documentation source
+- [Storybook](https://chat.carbondesignsystem.com/tag/latest/docs/documents/Overview.html): Interactive AI chat component docs
+
+## Resources
+
+- [GitHub](https://github.com/carbon-design-system/carbon): Source code
+- [Storybook (React)](https://react.carbondesignsystem.com/): Interactive component demos
+- [FAQ](https://carbondesignsystem.com/help/faq/): Frequently asked questions
+- [Changelog](https://github.com/carbon-design-system/carbon/releases): Release notes
+- [Community Assets](https://carbondesignsystem.com/community/component-index/): Community components