MCP Quiz

Ce que fait cette application

MCP Quiz est une application MCP de quiz interactif qui remplace les Q&A en texte brut par une interface React enrichie et intégrée. Lorsque vous invoquez l'outil quiz dans Cursor ou VS Code Copilot Chat, l'hôte rend une iframe sandboxée contenant un quiz entièrement interactif — questions à choix multiples, suivi de la progression, confettis à la fin et résumé des résultats — tout cela sans quitter votre éditeur.

Construit comme une implémentation de référence pour la spécification MCP Apps, il démontre comment associer un serveur MCP à un frontend React mono-fichier regroupé via vite-plugin-singlefile.

Fonctionnalités clés

• Interface React intégrée — s'exécute dans la sandbox iframe de l'hôte via le protocole de ressource ui:// des MCP Apps
• Callbacks d'outils en direct — l'interface appelle callServerTool() pour récupérer les questions, soumettre les réponses et obtenir les résultats du serveur MCP en cours d'exécution
• Barre de progression + confettis — feedback visuel utilisant les primitives Radix UI et canvas-confetti
• Double transport — supporte les modes HTTP (recommandé pour le dev) et stdio
• Zéro hébergement externe — bundle HTML mono-fichier servi directement depuis le serveur MCP

Installation

Cursor (HTTP)

Démarrez d'abord le serveur : npm install && npm run build && npm run serve

Puis ajoutez à ~/.cursor/mcp.json :

{
  "mcpServers": {
    "mcp-quiz": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

VS Code Copilot (HTTP)

Ouvrez la Palette de commandes → MCP: Open User Configuration, puis ajoutez :

{
  "servers": {
    "mcp-quiz": {
      "type": "http",
      "url": "http://localhost:3001/mcp"
    }
  }
}

stdio (géré par le client)

{
  "mcpServers": {
    "mcp-quiz": {
      "command": "npx",
      "args": ["-y", "mcp-quiz", "--stdio"]
    }
  }
}

Hôtes supportés

Confirmé dans le README : Cursor, VS Code Copilot.