Name: Démo de Calculatrice MCP Remix 3
Availability: InStock
Author: kentcdodds

Ce qu'il fait

Cette application MCP intègre un widget de calculatrice entièrement interactif directement dans les interfaces de chat IA comme ChatGPT. Lorsque vous demandez une calculatrice, l'IA invoque l'outil MCP et affiche une interface utilisateur de calculatrice inspirée de Tron dans une iframe — sans changement de contexte, sans applications externes. Le widget communique dans les deux sens : l'IA peut pré-configurer l'état de la calculatrice (par exemple, définir une valeur initiale et une opération en attente), et le widget peut renvoyer des messages pour influencer la conversation.

Fonctionnalités clés

Objet Durable Cloudflare avec état — maintient l'état de la calculatrice côté serveur à travers les interactions
Communication MCP bidirectionnelle — le widget renvoie ui/message à l'IA, permettant d'influencer dynamiquement la conversation
État pré-configurable — l'IA peut définir la valeur d'affichage initiale, l'opération en attente et le mode de saisie avant le chargement du widget
Easter egg Tron — le calcul de 1982 déclenche l'envoi d'un prompt de persona Master Control Program à l'IA
Pipeline de build séparé — Vite construit les bundles du widget, Wrangler déploie le Worker Cloudflare indépendamment

Installation

ChatGPT (HTTP) : Déployez d'abord sur Cloudflare (npm run deploy), puis dans Paramètres ChatGPT → Connecteurs, ajoutez :

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

Claude Desktop :

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

VS Code Copilot :

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