MCP Apps Playground

What it does

A learning-focused monorepo that demonstrates how to build interactive MCP Apps with embedded UI components (iframes). Each app renders a rich widget alongside the AI response — covering arithmetic, text echo, PDF generation, secure file upload, and a multilingual hospital admission workflow. Works on both ChatGPT (HTTP/ngrok) and Claude Desktop (STDIO) from a single codebase.

Key features

• Five production-quality apps — Echo, Calculator, Hospi-Copilot (multilingual EN/NL/FR healthcare journey), PDF Generator, and File Processor
• Dual-platform transport — HTTP for ChatGPT via ngrok; STDIO for Claude Desktop subprocess mode
• Single-file HTML bundles — Vite + vite-plugin-singlefile packages each widget into one deployable file
• App scaffolding — new-app.sh script creates a new skeleton in ~5 minutes
• CSP-compliant — All apps pass ChatGPT's Content Security Policy requirements and are submission-ready

Installation

Claude Desktop (STDIO Mode)

git clone https://github.com/januxprobe/mcp-apps-playground.git
cd mcp-apps-playground && npm install
./scripts/claude-desktop-config.sh
# Then fully restart Claude Desktop

Or add manually to claude_desktop_config.json:

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

VS Code Copilot / ChatGPT (HTTP Mode)

./scripts/start-app.sh calculator
# Copy the ngrok URL and add as a connector in ChatGPT Settings → Connectors

Supported hosts

ChatGPT (HTTP via ngrok) and Claude Desktop (STDIO) are both confirmed and documented in the README.