MCP Apps Demo

Ce que cela fait

Ce projet démontre la puissance des MCP Apps, permettant aux outils de renvoyer du contenu HTML riche et interactif qui s'affiche directement dans l'interface du chat au lieu du texte brut. Il transforme l'interaction avec l'IA, passant d'un chat textuel à une expérience d'application dynamique.

Fonctionnalités clés

• Horloge Interactive : Un widget d'horloge en temps réel avec affichage du fuseau horaire et synchronisation avec l'heure du serveur.
• Tableau de Bord Système : Un tableau de bord de métriques en direct avec des graphiques animés pour le processeur (CPU), la mémoire et le temps de fonctionnement (uptime).
• Interaction Bidirectionnelle : Utilise le SDK @modelcontextprotocol/ext-apps pour permettre à l'interface utilisateur de rappeler le serveur MCP.
• Rendu Sandboxé : Les composants de l'interface utilisateur sont rendus dans des iframes sécurisées au sein de l'interface de chat.

Installation

• Claude Desktop : Ajoutez à claude_desktop_config.json :

{
  "mcpServers": {
    "mcp-apps-demo": {
      "command": "node",
      "args": ["/path/to/mcp-apps-demo/server.js"]
    }
  }
}

• Claude Code : claude mcp add mcp-apps-demo node /path/to/mcp-apps-demo/server.js

Hôtes supportés

• Claude Desktop
• Claude Code