MCP App Workers Template

Ce qu'il fait

Le modèle MCP App Workers Template vous fournit un échafaudage complet et fonctionnel pour créer des serveurs MCP qui rendent des widgets HTML interactifs à l'intérieur d'hôtes compatibles MCP. Au lieu de renvoyer du texte brut, vos outils affichent des interfaces utilisateur riches basées sur React — comme des résultats de recherche, des tableaux de bord ou des cartes de détails — directement dans le client. L'exemple de recherche d'anime inclus interroge l'API Jikan (MyAnimeList) et rend les résultats dans un widget interactif stylisé.

Fonctionnalités clés

• Système de widgets React : Créez des widgets UI interactifs avec React 19 et Tailwind CSS 4, compilés en bundles HTML mono-fichier via Vite
• Liaison outil-widget : Attachez un widget UI à n'importe quel outil MCP en utilisant _meta["ui/resourceUri"] — l'hôte le rend automatiquement lors de l'appel de l'outil
• Intégration MCP Extensions Apps : Communication bidirectionnelle entre le widget et l'hôte via @modelcontextprotocol/ext-apps
• Déploiement Cloudflare Workers : Déployez mondialement en quelques minutes avec wrangler deploy ; le binding ASSETS intégré sert le HTML du widget
• Prêt pour CSP : Configuration de la politique de sécurité du contenu (CSP) par widget pour connectDomains et resourceDomains

Installation

Cloner et exécuter localement :

git clone https://github.com/MCPJam/mcp-app-workers-template.git
cd mcp-app-workers-template
npm install && npm run build && npm run dev

Claude Desktop — après avoir déployé votre worker, ajoutez à claude_desktop_config.json :

{
  "mcpServers": {
    "my-mcp-app": {
      "type": "http",
      "url": "https://<<vvotre-worker>.<<vvotre-sous-domaine>.workers.dev/mcp"
    }
  }
}

VS Code Copilot — ajoutez à settings.json :

"github.copilot.chat.mcp.servers": {
  "my-mcp-app": {
    "type": "http",
    "url": "https://<<vvotre-worker>.<<vvotre-sous-domaine>.workers.dev/mcp"
  }
}

Claude.ai web : Ajoutez https://<<vvotre-worker>.<<vvotre-sous-domaine>.workers.dev/mcp dans les paramètres de Claude.ai → Intégrations.

Hôtes supportés

Tout client MCP supportant le transport HTTP/SSE et le protocole de widget MCP Extensions Apps — MCPJam est l'hôte principal confirmé.