MCP Apps Playground

Ce qu'il fait

Un monorepo axé sur l'apprentissage qui démontre comment construire des applications MCP interactives avec des composants d'interface utilisateur intégrés (iframes). Chaque application rend un widget riche à côté de la réponse de l'IA — couvrant l'arithmétique, l'écho de texte, la génération de PDF, le téléchargement sécurisé de fichiers et un flux d'admission hospitalière multilingue. Fonctionne sur ChatGPT (HTTP/ngrok) et Claude Desktop (STDIO) à partir d'une seule base de code.

Caractéristiques clés

• Cinq applications de qualité production — Echo, Calculator, Hospi-Copilot (parcours de santé multilingue EN/NL/FR), PDF Generator et File Processor
• Transport bi-plateforme — HTTP pour ChatGPT via ngrok ; STDIO pour le mode sous-processus de Claude Desktop
• Bundles HTML mono-fichier — Vite + vite-plugin-singlefile encapsule chaque widget dans un seul fichier déployable
• Échafaudage d'application — le script new-app.sh crée un nouveau squelette en environ 5 minutes
• Conforme CSP — Toutes les applications respectent les exigences de la politique de sécurité du contenu (CSP) de ChatGPT et sont prêtes pour la soumission

Installation

Claude Desktop (Mode STDIO)

git clone https://github.com/januxprobe/mcp-apps-playground.git
cd mcp-apps-playground && npm install
./scripts/claude-desktop-config.sh
# Puis redémarrez complètement Claude Desktop

Ou ajoutez manuellement à claude_desktop_config.json :

{
  "mcpServers": {
    "calculator": {
      "command": "npx",
      "args": ["tsx", "/path/to/mcp-apps-playground/apps/calculator/standalone.ts", "--stdio"]
    }
  }
}

VS Code Copilot / ChatGPT (Mode HTTP)

./scripts/start-app.sh calculator
# Copiez l'URL ngrok et ajoutez-la comme connecteur dans Paramètres ChatGPT → Connecteurs

Hôtes supportés

ChatGPT (HTTP via ngrok) et Claude Desktop (STDIO) sont tous deux confirmés et documentés dans le README.