MCP Welcome Form App

Ce qu'elle fait

Rend un formulaire interactif dans les hôtes compatibles MCP — l'utilisateur saisit un nom, clique sur Envoyer, et un message de bienvenue personnalisé apparaît. Les données soumises retournent vers l'IA comme contexte, démontrant le cycle complet d'une App MCP : chat → appel d'outil → rendu UI → saisie utilisateur → l'IA reçoit le résultat.

Caractéristiques clés

• UI React interactive — Formulaire avec entrée de texte et bouton de soumission, rendu en ligne dans la conversation via iframe.
• Stylisation consciente de l'hôte — Les variables CSS s'adaptent automatiquement au mode clair/sombre selon le thème de l'hôte.
• Double transport — Fonctionne à la fois en stdio (Claude Desktop, VS Code) et en HTTP (Claude.ai, tests navigateur).
• Gestionnaire d'outils côté serveur — Les soumissions de formulaires passent par app.callServerTool() vers un gestionnaire Node.js avec un accès complet au backend (API REST, bases de données, système de fichiers).
• Build mono-fichier — Vite + vite-plugin-singlefile regroupe l'UI React dans un seul fichier HTML autonome pour faciliter le service de ressources MCP.

Installation

Claude Desktop : Ajouter à claude_desktop_config.json :

{
  "mcpServers": {
    "welcome-form": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/mcp-apps/dist/main.js", "--stdio"]
    }
  }
}

VS Code Copilot : Ajouter au fichier .vscode/mcp.json de l'espace de travail ou au settings.json global :

{
  "mcp": {
    "servers": {
      "welcome-form": {
        "type": "stdio",
        "command": "node",
        "args": ["/ABSOLUTE/PATH/TO/mcp-apps/dist/main.js", "--stdio"]
      }
    }
  }
}

Claude.ai web : Exécutez npm run serve puis créez un tunnel avec npx cloudflared tunnel --url http://localhost:3001. Ajoutez l'URL du tunnel comme intégration MCP distante à https://random-name.trycloudflare.com/mcp.

Hôtes supportés

Claude Desktop, VS Code Copilot, Claude.ai (web), Goose.