MCP Quiz

What it does

MCP Quiz is an interactive quiz MCP App that replaces plain-text Q&A with a rich embedded React UI. When you invoke the quiz tool in Cursor or VS Code Copilot Chat, the host renders a sandboxed iframe containing a fully interactive quiz — multiple-choice questions, progress tracking, confetti on completion, and a results summary — all without leaving your editor.

Built as a reference implementation for the MCP Apps spec, it demonstrates how to pair an MCP server with a bundled single-file React frontend using vite-plugin-singlefile.

Key features

• Embedded React UI — runs inside the host's iframe sandbox via the MCP Apps ui:// resource protocol
• Live tool callbacks — UI calls callServerTool() to fetch questions, submit answers, and retrieve results from the running MCP server
• Progress bar + confetti — visual feedback using Radix UI primitives and canvas-confetti
• Dual transport — supports both HTTP (recommended for dev) and stdio modes
• Zero external hosting — single-file HTML bundle served directly from the MCP server

Installation

Cursor (HTTP)

First start the server: npm install && npm run build && npm run serve

Then add to ~/.cursor/mcp.json:

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

VS Code Copilot (HTTP)

Open Command Palette → MCP: Open User Configuration, then add:

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

stdio (client-managed)

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

Supported hosts

Confirmed in README: Cursor, VS Code Copilot.