L'UI générative s'améliore lorsque les modèles choisissent des composants, pas seulement du texte_

Une réponse de chat est souvent la mauvaise forme de sortie pour une tâche de produit réelle.

Si un utilisateur demande une répartition du portefeuille, une chronologie ou un tableau comparatif, la réponse la plus utile est souvent un composant, pas un paragraphe. C'est l'idée derrière l'UI générative : laisser le modèle participer à la sélection ou à la configuration des éléments d'interface, et pas seulement à la génération de texte.

La partie importante est le contrôle. Le modèle ne doit pas inventer des UI arbitraires. Il doit choisir parmi un ensemble de composants fiables que votre système sait déjà rendre de manière sécurisée.

Un meilleur modèle

Au lieu de demander à un LLM de produire un marquage frontend libre, donnez-lui un vocabulaire contraint :

type UiIntent =
  | { type: "chart"; metric: string; period: "7d" | "30d" | "90d" }
  | { type: "table"; entity: "orders" | "users"; limit: number }
  | { type: "summary"; topic: string };

Ensuite, l'application associe cette sortie à de vrais composants :

function RenderIntent({ intent }: { intent: UiIntent }) {
  switch (intent.type) {
    case "chart":
      return <RevenueChart metric={intent.metric} period={intent.period} />;
    case "table":
      return <EntityTable entity={intent.entity} limit={intent.limit} />;
    case "summary":
      return <SummaryCard topic={intent.topic} />;
  }
}

Cela vous offre la meilleure partie de l'UI générative sans confier le contrôle de la mise en page à un système stochastique.

Où les composants serveur aident

Les composants serveur React rendent ce modèle plus naturel car le serveur peut :

• récupérer des données privées
• façonner le résultat
• rendre le bon arbre de composants

sans expédier chaque dépendance interne au navigateur.

Le compromis est que vous avez toujours besoin d'une frontière claire entre ce que le modèle décide et ce que l'application garantit.

Compromis

L'UI générative est utile lorsque :

• la forme de l'interface dépend de l'intention de l'utilisateur
• l'ensemble des composants supportés est connu
• l'application bénéficie d'une composition dynamique

Elle est moins utile lorsque l'UI doit être statique, fortement orientée workflow ou auditable lourdement.

Lectures complémentaires

• React Server Components
• Vercel AI SDK
• OpenAI Function Calling Guide