MCP Primer

What it does

MCP Primer is an MCP App that lets AI models render real GitHub Primer React components directly inside AI conversations. Instead of describing a UI in text, the AI calls a tool with a component tree in JSON, and the MCP App renders it as a live, fully-themed Primer UI — buttons, avatars, labels, forms, overlays, and more.

Built on the MCP Apps extension, it supports 272 components auto-discovered from @primer/react with Zod schemas and JSDoc descriptions. Both light and dark GitHub themes are supported.

Key features

• 272 Primer components — Layout (Stack, PageLayout), Typography (Heading, Text), Actions (Button, ActionMenu), Navigation (Breadcrumbs, Pagination), Data display (Avatar, Label, StateLabel, Token), Forms (TextInput, Select, Checkbox, ToggleSwitch), and Overlays (Dialog, ActionList)
• Compound component support — Dot notation for nested components like ActionList.Item, FormControl.Label, Timeline.Badge
• Real GitHub theming — Full light and dark mode with official Primer design tokens
• Two tools — render-primer for rendering component trees, list-components for discovering available components with usage examples
• Single-file build — Bundled as dist/mcp-app.html for easy deployment

Installation

VS Code Copilot (Insiders)

Add to .vscode/mcp.json:

{
  "servers": {
    "primer": {
      "command": "bash",
      "args": ["-c", "cd ~/source/mcp-primer && npm run build >&2 && node dist/main.js --stdio"]
    }
  }
}

Claude.ai web (HTTP transport)

git clone https://github.com/austenstone/mcp-primer
cd mcp-primer && npm install && npm start
# Exposes MCP at http://localhost:3001/mcp

Then add http://localhost:3001/mcp in Claude.ai Settings → Integrations.

Supported hosts

VS Code Copilot (Insiders) is confirmed in the README. Also works with any MCP client supporting HTTP transport.