MCP Primer

Ce qu'il fait

MCP Primer est une application MCP qui permet aux modèles d'IA de rendre de véritables composants React Primer de GitHub directement à l'intérieur des conversations IA. Au lieu de décrire une interface utilisateur en texte, l'IA appelle un outil avec un arbre de composants en JSON, et l'application MCP le rend comme une interface Primer vivante et entièrement thématisée — boutons, avatars, étiquettes, formulaires, superpositions, et plus encore.

Basé sur l'extension MCP Apps, il prend en charge 272 composants auto-découverts depuis @primer/react avec des schémas Zod et des descriptions JSDoc. Les thèmes clair et sombre de GitHub sont tous deux supportés.

Fonctionnalités clés

• 272 composants Primer — Mise en page (Stack, PageLayout), Typographie (Heading, Text), Actions (Button, ActionMenu), Navigation (Breadcrumbs, Pagination), Affichage de données (Avatar, Label, StateLabel, Token), Formulaires (TextInput, Select, Checkbox, ToggleSwitch), et Superpositions (Dialog, ActionList)
• Support des composants composés — Notation par point pour les composants imbriqués comme ActionList.Item, FormControl.Label, Timeline.Badge
• Thématisation GitHub réelle — Modes clair et sombre complets avec les jetons de design officiels de Primer
• Deux outils — render-primer pour le rendu d'arbres de composants, list-components pour découvrir les composants disponibles avec des exemples d'utilisation
• Build en un seul fichier — Packagé en dist/mcp-app.html pour un déploiement facile

Installation

VS Code Copilot (Insiders)

Ajoutez à .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 (transport HTTP)

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

Puis ajoutez http://localhost:3001/mcp dans Claude.ai Settings → Integrations.

Hôtes supportés

VS Code Copilot (Insiders) est confirmé dans le README. Fonctionne également avec tout client MCP supportant le transport HTTP.