MCP Dynamic Form UI (PoC)
Interface UIpar devjoaolopes
Application MCP de preuve de concept qui rend des formulaires dynamiques basés sur des spécifications sous forme de widgets UI interactifs, validés par un flux de gestion de dossiers multi-étapes.
Ce qu'il fait
Cette preuve de concept démontre comment les applications MCP peuvent fournir des interfaces utilisateur de formulaires entièrement dynamiques et basées sur des données à l'intérieur des interfaces d'assistants IA. Plutôt que de coder des écrans en dur, le serveur MCP émet un contrat JSON FormSpec qui pilote un widget React — ce qui signifie que l'UI s'adapte à n'importe quel flux sans modification de code. La démo incluse implémente un flux de gestion de dossiers multi-étapes (classification, faits, parties, revue, routage) utilisant un serveur MCP Node.js et un widget Next.js.
L'architecture valide l'ensemble de la pile MCP Apps : les URI de ressource ui:// pour la livraison HTML en ligne, PostMessageTransport pour la communication widget-hôte, et un pont devhost pour le développement local sur n'importe quel hôte compatible MCP.
Caractéristiques clés
- Rendu piloté par FormSpec — le serveur déclare les types de champs, les règles de visibilité, les conditions requises et les options de sélection ; le widget les rend automatiquement, aucun code UI par étape n'est requis
- Pipeline de validation complet — le backend impose les champs obligatoires, la vérification des types, les règles conditionnelles (ex:
justificativaSigilorequis quandsigilo=true), et les modes de soumission brouillon vs complet - Livraison UI en ligne — la ressource
ui://nf/forms.htmlest servie en ligne par le serveur MCP pour une compatibilité maximale, y compris les connecteurs ChatGPT - Devhost pour tests locaux — une page devhost Next.js intégrée proxy les interactions du widget vers le serveur MCP sans nécessiter d'hôte IA actif
- Compatible Connecteur ChatGPT — exposez le port 4000 via HTTPS (ex. ngrok) et enregistrez-le comme un Connecteur Développeur ChatGPT
Installation
Il s'agit d'une preuve de concept de développement local — aucun package npm n'est publié.
git clone https://github.com/DevJoaoLopes/poc-mcp-apps.git
cd poc-mcp-apps
pnpm install
pnpm dev
# UI sur http://localhost:3000/devhost
# Serveur MCP sur http://localhost:4000/mcp
Connecteur ChatGPT (Mode Développeur) :
- Exposez le port 4000 publiquement :
ngrok http 4000 - Dans le Mode Développeur de ChatGPT, créez un Connecteur pointant vers
https://VOTRE-NGROK/mcp
Hôtes supportés
Explicitement validé avec les connecteurs ChatGPT. Le devhost local fonctionne avec n'importe quel client compatible MCP via HTTP.
