@primer/react-brand/docs/introduction/mcp.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: MCP server
description: Help AI agents use Primer Brand correctly with our Model Context Protocol server.
keywords: ['mcp', 'ai', 'agents', 'model context protocol', 'copilot', 'claude code']
---

The Primer Brand [MCP server](https://www.npmjs.com/package/@primer/brand-mcp) (`@primer/brand-mcp`) helps AI agents understand and use Primer Brand (`@primer/react-brand`) correctly.

It is a version-aware, local (`stdio`) server that reads the docs and metadata of your installed `@primer/react-brand` dependency.

> The MCP server requires [Node.js](https://nodejs.org/) 24 or later.

## What it provides

The server exposes a set of tools that AI agents can call:

| Tool                       | What it does                                                                                                                                         |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `primer_brand_setup`       | Configures Primer Brand first-time. Includes `ThemeProvider`, Mona Sans and RSC-directive configuration among other things                           |
| `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, labels) and the current-brand reference templates to start from. |
| `primer_brand_component`   | Get a component API information like props, allowed values and named sub-components.                                                                 |
| `primer_brand_examples`    | Reference examples taken from our Storybook.                                                                                                         |
| `primer_brand_tokens`      | Resolve design tokens by intent (color, space, typography) to CSS variables and values.                                                              |
| `primer_brand_asset`       | Find Octicons (`@primer/octicons-react`) and Octovisuals (`@primer/octovisuals-react`) more easily                                                   |
| `primer_brand_docs`        | Search and read Primer Brand guidance, including principles, accessibility and getting started.                                                      |
| `primer_brand_review`      | Check generated JSX and CSS against the design system for unknown components, invalid props, hardcoded values                                        |

## Set up in VS Code

Add the server to your workspace's `.vscode/mcp.json` (or your user `mcp.json`):

```jsonc
{
  "servers": {
    "Primer Brand": {
      "type": "stdio",
      "command": "npx",
      "args": ["@primer/brand-mcp@latest"]
    }
  }
}
```

## Set up in other clients

For GitHub Copilot CLI and other `stdio`-enabled MCP clients, run the server directly:

```shell
npx @primer/brand-mcp@latest
```

Refer to the [package README](https://github.com/primer/brand/tree/main/packages/mcp) for the latest configuration details.