Remix 3 MCP Calculator Demo

What it does

This MCP app embeds a fully interactive calculator widget directly inside AI chat interfaces like ChatGPT. When you ask for a calculator, the AI invokes the MCP tool and renders a Tron-inspired calculator UI in an iframe — no context switching, no external apps. The widget communicates two-ways: the AI can pre-configure the calculator's state (e.g. set an initial value and pending operation), and the widget can send messages back to influence the conversation.

Key features

• Stateful Cloudflare Durable Object — maintains calculator state server-side across interactions
• Two-way MCP communication — widget sends ui/message back to the AI, enabling dynamic conversation influence
• Pre-configurable state — AI can set initial display value, pending operation, and input mode before widget loads
• Tron easter egg — calculating 1982 triggers a Master Control Program persona prompt sent back to the AI
• Separate build pipeline — Vite builds widget bundles, Wrangler deploys the Cloudflare Worker independently

Installation

ChatGPT (HTTP): Deploy to Cloudflare first (npm run deploy), then in ChatGPT Settings → Connectors add:

https://<your-worker>.workers.dev/mcp

Claude Desktop:

{
  "mcpServers": {
    "remix-mcp": {
      "command": "npx",
      "args": ["wrangler", "dev", "--local"],
      "cwd": "/path/to/cloudflare-remix-vite-mcp"
    }
  }
}

VS Code Copilot:

{
  "mcp": {
    "servers": {
      "remix-mcp": {
        "type": "http",
        "url": "https://<your-worker>.workers.dev/mcp"
      }
    }
  }
}

Supported hosts

ChatGPT (HTTP via Cloudflare Workers deployment).