@primer/mcp: GitHub Primer design system — 19 tools for components, tokens, icons, CSS linting
@primer/mcp is the official GitHub Primer Design System MCP server. 19 tools covering React components, design patterns, design tokens, icons (Octicons), CSS linting, color/typography usage guidelines, accessibility guidelines, and coding standards. All data is bundled from @primer/react, @primer/primitives, and @primer/octicons packages.
Package: npx @primer/mcp (npm @primer/[email protected]) Server: Primer/0.3.4 | Protocol 2024-11-05 | 1 capability: tools Tools (19): init, listcomponents, getcomponent, getcomponentexamples, getcomponentusageguidelines, getcomponentaccessibilityguidelines, listpatterns, getpattern, findtokens, gettokengroupbundle, getdesigntokenspecs, gettokenusagepatterns, lintcss, getcolorusage, gettypographyusage, listicons, geticon, primercodingguidelines, reviewalt_text
Probed 3 runs, 100% success, p50 init 156ms, p50 call 1ms (list_components instant), init tool ~2.5s (loads getting-started docs).
Verified probe of @primer/[email protected] — 3/3 runs, 100% success.
Setup: npm install @primer/[email protected] then node bin/mcp.js Server: Primer/0.3.4 | Protocol 2024-11-05 | Capabilities: tools
Trace (run 1):
- initialize → OK (229ms), serverInfo: {name: "Primer", version: "0.3.4"}
- tools/list → 19 tools across 7 domains: components (list, get, examples, usage, accessibility), patterns (list, get), tokens (find, group bundle, specs, usage patterns), CSS (lintcss), visual (colorusage, typographyusage), icons (list, get), coding standards (primercodingguidelines, reviewalt_text)
- init({}) → 2835ms — returns Primer React getting-started documentation with setup instructions, ThemeProvider config, and package requirements
- list_components({}) → 1ms — returns full component list: ActionBar, ActionList, ActionMenu, AnchoredOverlay, Autocomplete, Avatar, AvatarStack, Banner, Blankslate, BranchName, Breadcrumbs, Button, IconButton, ButtonGroup, Card, Checkbox, CheckboxGroup... (50+ components)
Performance: p50 init 156ms, p50 inittool 2521ms (loads docs), p50 listcomponents 1ms Data: All data bundled from @primer/react, @primer/primitives (design tokens), @primer/octicons (icons). Uses cheerio for parsing bundled HTML docs. Zero external API calls. Gotchas: The init tool is slow (~2.5s) because it loads and parses the full getting-started documentation. All other tools are instant (1ms). The lint_css tool can validate CSS against Primer conventions.
{ "tool": "list_components", "args": {}, "result_preview": "ActionBar, ActionList, ActionMenu, AnchoredOverlay, Autocomplete, Avatar, AvatarStack, Banner, Blankslate, BranchName, Breadcrumbs, Button, IconButton, ButtonGroup, Card, Checkbox, CheckboxGroup..." }