JSON-RENDER : des interfaces générées par l’IA, sans perdre le contrôle
📌 JSON-RENDER est un framework de « Generative UI » signé Vercel Labs : l’IA écrit des interfaces à partir d’un prompt, mais uniquement avec les composants autorisés dans votre catalogue. Le JSON généré reste prévisible, et l’application le rend avec ses propres composants.
Laisser un modèle écrire du JSX librement, c’est accepter des composants hallucinés, du balisage cassé et un résultat différent à chaque exécution. json-render prend le problème à l’envers. Vous décrivez d’abord un catalogue : les composants disponibles, leurs props validées avec Zod, les actions déclenchables. Le modèle ne peut plus sortir de ce vocabulaire. Il produit un JSON contraint, votre application l’affiche, et le rendu est identique à chaque fois.
La page d’accueil le montre en direct : on tape « Show a team performance dashboard », le JSON défile à gauche pendant que le dashboard se dessine à droite. Le rendu est progressif. Pas besoin d’attendre la fin de la réponse du modèle : le protocole SpecStream applique les patchs au fur et à mesure que le texte arrive.
- 🧩 Garde-fous : l’IA n’utilise que les composants et actions du catalogue
- ⚡ Rendu progressif pendant que le JSON arrive en streaming
- 🔗 Data binding : $bindState, visibility conditions, props dynamiques et watchers
- 📱 Une même spécification pour React, Vue, Svelte, Solid et React Native
- 📦 Export en code React autonome, sans dépendance au runtime
Côté usages, on imagine vite le quotidien : un dashboard généré à la demande, un formulaire complet avec validation et listes déroulantes, un widget personnalisé par utilisateur. Le catalogue par défaut couvre l’essentiel — tableaux, graphiques en barres et en courbes, métriques KPI, onglets, dialogues, pagination, notation en étoiles. Le package @json-render/shadcn fournit en plus 36 composants shadcn/ui prêts à l’emploi, et le système génère lui-même le prompt système à partir du catalogue.
Ce qui m’a le plus surpris, c’est l’étendue des surfaces de rendu. La même spécification s’affiche en React, Vue, Svelte, Solid ou React Native, mais elle devient aussi une vidéo avec Remotion, un PDF avec react-pdf, un e-mail HTML avec react-email, une interface dans le terminal avec Ink, voire une scène 3D avec React Three Fiber — Gaussian Splatting compris. Il existe même un renderer Next.js qui fait d’un JSON une application complète, avec routes, layouts et SSR. Je trouve cette approche convaincante : au lieu de générer du code à corriger, on génère des données que l’application sait déjà afficher.
La limite est évidente : tout ce qui ne figure pas dans le catalogue n’existe pas pour le modèle. La créativité de l’IA s’arrête au vocabulaire qu’on lui donne. C’est le prix de la fiabilité, et je le trouve raisonnable. À noter aussi : le projet vient de Vercel Labs, le laboratoire expérimental de Vercel, et l’API bouge vite — le README liste déjà une trentaine de packages. Le tout sous licence Apache-2.0, avec environ 18 000 étoiles sur GitHub.
Dernier détail qui a son importance : une interface générée peut sortir du runtime. L’export transforme l’arbre UI en composants React autonomes, avec package.json, styles et tout le nécessaire pour tourner seuls — pratique pour figer un dashboard généré en code maintenable. Et via MCP, json-render se branche directement dans Claude, ChatGPT, Cursor ou VS Code.
Sources
