JSON‑Render : Bibliothèque UI IA protégée par invites pour React

Dans l'ère des grands modèles linguistiques, les développeurs cherchent constamment des moyens de transformer des invites textuelles pures en interfaces utilisateur exploitables. JSON‑Render remplit ce besoin en donnant à l'IA un vocabulaire prévisible et sûr, de sorte que la sortie soit toujours un arbre JSON que vous pouvez rendre avec React — pas de surprises, pas de failles de sécurité.

Qu’est‑ce que JSON‑Render ?

JSON‑Render est un toolkit léger, orienté TypeScript, composé de deux packages NPM :

• @json-render/core – définitions de schémas, garde‑fous, logique de visibilité et gestionnaires d’actions.
• @json-render/react – composants React, hooks et renderers qui transforment le JSON en une UI en direct.

Principaux avantages :

Guide de démarrage rapide

Voici un guide pas à pas d’un exemple minimal. Supposons un nouveau projet Node avec pnpm.

# Clonez et initialisez
git clone https://github.com/vercel-labs/json-render
cd json-render
pnpm install
pnpm dev

La commande dev lance quatre services : * localhost:3000 – Documentation et Playground * localhost:3001 – Application tableau de bord d'exemple * Points de terminaison websocket pour l'API * Un backend local compatible ChatGPT (voir le dépôt pour une intégration LLM personnalisée)

1. Définir le catalogue

Dans packages/core/src/catalog.ts, vous déclarez chaque composant que l'IA peut utiliser. Voici un exemple compact :

import { createCatalog } from '@json-render/core'
import { z } from 'zod'

const catalog = createCatalog({
  components: {
    Card: {
      props: z.object({ title: z.string() }),
      hasChildren: true,
    },
    Metric: {
      props: z.object({
        label: z.string(),
        valuePath: z.string(),
        format: z.enum(['currency', 'percent', 'number']),
      }),
    },
    Button: {
      props: z.object({ label: z.string(), action: ActionSchema }),
    },
  },
  actions: {
    export_report: { description: 'Exporter le tableau de bord vers PDF' },
    refresh_data: { description: 'Actualiser toutes les métriques' },
  },
})
export default catalog

ActionSchema est un schéma Zod que vous importez depuis @json-render/core et qui valide la forme d'un payload d'action.

2. Enregistrer les renderers React

Créez un petit registre qui mappe les noms de composant aux éléments React réels.

const registry = {
  Card: ({ element, children }) => (
    <div className="card">
      <h3>{element.props.title}</h3>
      {children}
    </div>
  ),
  Metric: ({ element }) => {
    const value = useDataValue(element.props.valuePath)
    return <div className="metric">{format(value)}</div>
  },
  Button: ({ element, onAction }) => (
    <button onClick={() => onAction(element.props.action)}>
      {element.props.label}
    </button>
  ),
}

3. Rassembler tout

import { useUIStream, DataProvider, ActionProvider, Renderer } from '@json-render/react'

function Dashboard() {
  const { tree, send } = useUIStream({ api: '/api/generate' })

  return (
    <DataProvider initialData={{ revenue: 125000, growth: 0.15 }}>
      <ActionProvider actions={{
        export_report: () => downloadPDF(),
        refresh_data: () => refetch(),
      }}>
        <input
          placeholder="Créer un tableau de bord de revenus…"
          onKeyDown={(e) => e.key === 'Enter' && send(e.target.value)}
        />
        <Renderer tree={tree} components={registry} />
      </ActionProvider>
    </DataProvider>
  )
}

Lorsque l'utilisateur saisit une invite en langage naturel et appuie sur Enter, la bibliothèque diffuse la réponse JSON de l'IA, le registre la rend et toute action définie déclenche des fonctions de rappel.

Fonctionnalités avancées

Visibilité conditionnelle

Afficher ou masquer des éléments en fonction des données, de l'authentification ou de la logique personnalisée :

{
  "type": "Alert",
  "props": { "message": "Error occurred" },
  "visible": { "and": [ { "path": "/form/hasError" }, { "not": { "path": "/form/errorDismissed" } } ] }
}

Actions riches avec confirmation

{
  "type": "Button",
  "props": {
    "label": "Refund Payment",
    "action": {
      "name": "refund",
      "params": { "paymentId": { "path": "/selected/id" } },
      "confirm": { "title": "Confirm Refund", "variant": "danger" }
    }
  }
}

Validation intégrée

{
  "type": "TextField",
  "props": {
    "label": "Email",
    "valuePath": "/form/email",
    "checks": [
      { "fn": "required", "message": "Email is required" },
      { "fn": "email", "message": "Invalid email" }
    ],
    "validateOn": "blur"
  }
}

Quand utiliser JSON‑Render

• Prototype rapide – Convertir des invites en tableaux de bord fonctionnels en quelques minutes.
• Génération UI découplée – Séparer votre système de design du LLM.
• Rendu UI sécurisé – Les garde‑fous empêchent l’injection arbitraire de composants.
• Multiplateforme – Le cœur peut être utilisé dans React, React‑Native ou tout framework UI consomant du JSON.

Pour commencer

Clonez le dépôt, ajoutez votre propre backend LLM ou utilisez l'adaptateur OpenAI fourni, puis exécutez pnpm dev. Votre nouveau projet React importera automatiquement la logique de rendu. N'hésitez pas à étendre le catalogue ou remplacer le registry par des composants stylisés de votre système de design.

Astuce – Utilisez le docs & playground intégré sur localhost:3000 pour expérimenter avec les invites, les changements de catalogue et un aperçu en direct sans toucher le code.

Conclusion

JSON‑Render offre aux développeurs une façon propre et type‑sûre de laisser les LLM générer des composants UI. En conservant la sortie dans un format JSON prévisible et sécurisé, vous gardez le contrôle sur la sécurité, les performances et l'expérience utilisateur — tout en offrant la puissante commodité de la conception UI en langage naturel. Prêt à intégrer des tableaux de bord générés par IA dans votre produit ? Téléchargez le paquet depuis NPM et commencez à expérimenter dès aujourd’hui.