MCP server

Help AI agents use Primer correctly with the Primer Model Context Protocol server.

The Primer MCP server (@primer/mcp) helps AI agents understand and use Primer’s design system correctly.

The @primer/mcp package provides a local (stdio) server that connects AI tools to Primer design tokens, components, patterns, icons, and more. It can be run in your local development environment or set up in tools like GitHub Actions for AI agents.

What it provides

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

Tool	What it does
`init`	Sets up or creates a project that includes Primer React.
`list_components`	Lists the components available from Primer React.
`get_component`	Gets API information for a Primer React component.
`get_component_examples`	Gets examples for how to use a Primer React component.
`get_component_usage_guidelines`	Gets usage guidance for a Primer component.
`get_component_accessibility_guidelines`	Gets accessibility guidance for a Primer component.
`list_patterns`	Lists available Primer patterns.
`get_pattern`	Gets guidance for a Primer pattern.
`find_tokens`	Finds Primer design tokens by intent or value.
`get_token_group_bundle`	Gets bundled token data for a token group.
`get_design_token_specs`	Gets design token specifications.
`get_token_usage_patterns`	Gets guidance for using Primer design tokens.
`lint_css`	Checks CSS for Primer token usage.
`get_color_usage`	Gets guidance for applying color to a user interface.
`get_typography_usage`	Gets guidance for applying typography to a user interface.
`list_icons`	Lists the icons available from Primer Octicons React.
`get_icon`	Gets a specific Octicon by name.
`primer_coding_guidelines`	Gets guidance for writing code that uses Primer or for UI code that you are creating.
`review_alt_text`	Evaluates image alt text against accessibility best practices and context relevance.

Set up in VS Code

To use @primer/mcp in VS Code, install the server from the Command Palette:

Open the Command Palette (Cmd/Ctrl+Shift+P).
Type MCP: Install Server and select it.
Select the stdio type.
Enter npx @primer/mcp@latest.
Enter Primer for the server name.

Your MCP server configuration should look like:

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

Set up in other clients

GitHub Copilot CLI supports a similar stdio configuration in either .mcp.json or .github/mcp.json:

{
  "mcpServers": {
    "Primer": {
      "type": "stdio",
      "command": "npx",
      "args": ["@primer/mcp@latest"]
    }
  }
}

Other stdio-enabled MCP clients can use the same npx @primer/mcp@latest server command in their own configuration format. Refer to the package README for the latest configuration details.