MCP Dynamic UI Rendering PoC

Ce qu'il fait

Cette application MCP rend une interface utilisateur dynamique générée en temps réel par un Agent UI. Au lieu d'un tableau de bord prédéfini, le serveur demande à un LLM de générer le composant React le plus approprié pour les données retournées, lequel est ensuite rendu en direct dans le navigateur.

Fonctionnalités clés

• Génération de JSX en temps réel : Utilise le SDK GitHub Copilot pour générer des composants Chakra UI à la volée.
• Rendu en direct : Emploie react-live pour compiler et exécuter le code généré dans un environnement sandboxé.
• UI contextuelle : L'interface s'adapte en fonction de l'intention de l'utilisateur et de la structure des données.
• Intégration Chakra UI : Intégration profonde avec Chakra UI v3 pour des composants polis et professionnels.

Installation

Ceci est un PoC et nécessite une installation locale :

1. Clonez le dépôt et lancez npm install.
2. Lancez npm run build pour générer le bundle mcp-app.html.
3. Lancez npm run serve pour démarrer le serveur MCP sur le port 3001.

Hôtes supportés

• Basic Host (hôtes compatibles MCP supportant la spécification ext-apps)