MCP server - Primer

The Primer Brand MCP server (@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 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

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


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

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


npx @primer/brand-mcp@latest

Refer to the package README for the latest configuration details.