AI UI Demos

Ce qu'il fait

AI UI Demos est une application de démonstration Next.js qui enseigne cinq approches distinctes pour construire des interfaces utilisateur propulsées par l'IA — des frameworks de haut niveau jusqu'au protocole MCP brut. Chaque démo est une application fonctionnelle avec son propre modèle d'UI, ce qui la rend idéale pour les développeurs évaluant les architectures d'UI IA.

Caractéristiques clés

• Démo 1 — Planificateur de voyage (CopilotKit) : Synchronisation bidirectionnelle de l'état IA via useCopilotReadable et useCopilotAction ; édition d'itinéraire en langage naturel
• Démo 2 — Explorateur de recettes (Vercel AI SDK) : UI générative en streaming — l'IA rend des cartes de recettes React riches directement dans le chat
• Démo 3 — Constructeur d'histoires (Protocole AG-UI) : Flux d'événements SSE brut avec un panneau de débogage en direct affichant les 17 types d'événements AG-UI typés en temps réel
• Démo 4 — Histoire interactive (A2UI Déclaratif) : Sépare la logique métier (handler) du rendu UI (render) en utilisant le modèle A2UI déclaratif
• Démo 5 — Moniteur système MCP Apps : Véritable modèle MCP Apps — un serveur MCP HTTP expose une ressource ui:// rendue dans une iframe sandboxée avec un sondage CPU/mémoire toutes les 2 secondes

Installation

Auto-hébergé — clonez et lancez localement :

git clone https://github.com/rondagdag/ai-ui-demos
cd ai-ui-demos
npm install
cd mcp-server && npm install && npm run build && npm run build:ui && cd ..
cp .env.example .env.local
# Ajoutez OPENAI_API_KEY à .env.local
npm run dev

Visitez http://localhost:3000. Le serveur MCP HTTP démarre automatiquement sur le port 3001.

Il n'y a pas de version hébergée ni de configuration Claude Desktop — c'est un projet éducatif de développement local.

Hôtes supportés

Application Next.js auto-hébergée. La Démo 5 utilise le protocole MCP Apps (transport HTTP) avec CopilotKit comme client. Aucune configuration client MCP standard ne s'applique.