MCP App Template

Ce qu'il fait

MCP App Template est un kit de démarrage prêt pour la production pour créer des applications MCP — des widgets d'interface utilisateur React interactifs qui s'affichent directement dans des hôtes IA comme ChatGPT, Claude, VS Code Copilot et Goose. Au lieu que votre serveur MCP ne renvoie du texte brut, il renvoie des iframes riches et sécurisées avec une réelle interactivité : carrousels, tableaux de bord, visualisations 3D, gestionnaires de tâches glisser-déposer, générateurs de QR codes, moniteurs en temps réel, et bien plus encore.

Conçu prioritairement pour les agents de codage (Claude Code, Codex, Cursor), chaque élément de l'infrastructure est optimisé pour qu'une IA puisse modifier, tester et itérer sur les widgets sans intervention humaine.

Caractéristiques clés

• 12 widgets d'exemple prêts pour la production — carrousel, galerie, tableau de bord, système solaire 3D (Three.js), todo (glisser-déposer), flux de panier d'achat, générateur de QR, moniteur système (Chart.js), modélisateur de scénarios financiers, globe 3D interactif (CesiumJS), et plus encore
• ~450 tests orthogonaux auto-découverts par widget — conformité au protocole MCP Apps, accessibilité, rendu navigateur dans un véritable Chromium via Playwright ; les tests ne cassent jamais lorsque vous modifiez le contenu du widget
• Testeur d'application locale sans configuration propulsé par Puter.js — aucune clé API requise ; rend les widgets dans le chat pour un test manuel instantané
• Tests visuels automatisés pour agents — pnpm run ui-test --tool show_carousel rend n'importe quel widget et écrit une capture d'écran dans /tmp/ui-test/screenshot.png afin que les agents de codage puissent vérifier leurs modifications
• Rapports de notation automatisés — meilleures pratiques MCP, directives d'application et notes de qualité de sortie avec des indices FIX: ciblés pour les agents de codage
• Échafaudage en une commande — ./create_new_app.sh supprime les widgets d'exemple, retire les dépendances inutilisées et laisse une ardoise propre

Installation

Cloner et configurer :

git clone https://github.com/sebderhy/mcp-app-template.git my-app
cd my-app
./setup.sh

Démarrer le serveur :

pnpm run server  # http://localhost:8000

Claude Desktop — exposer via un tunnel, puis ajouter comme connecteur personnalisé :

npx cloudflared tunnel --url http://localhost:8000

Ajoutez l'URL du tunnel dans Claude Settings → Connectors.

ChatGPT — exposer via un tunnel, activer le Mode Développeur, puis ajouter le connecteur :

Settings → Connectors → <tunnel-url>/mcp

VS Code Copilot — ajouter à settings.json :

"github.copilot.chat.mcp.servers": {
  "mcp-app-template": { "url": "http://localhost:8000/mcp" }
}

Hôtes supportés

Claude Desktop, Claude.ai, ChatGPT, VS Code Copilot, Goose, Codex, Cursor — tout hôte compatible MCP Apps.