MAISON CODE .
/ Tech · AI · React · Generative UI · Vercel AI SDK

UI générative : quand l'interface se dessine toute seule

L’ère des tableaux de bord statiques est révolue. L'interface utilisateur générative permet à l'IA de restituer les composants React à la volée, créant ainsi une interface personnalisée pour chaque requête utilisateur.

AB
Alex B.
UI générative : quand l'interface se dessine toute seule

Le Web statique est mort

Depuis l’invention du HTML, le paradigme est le suivant :

  1. Le développeur conçoit une mise en page (en-tête, contenu, pied de page).
  2. Le développeur écrit le code.
  3. Page de visites des utilisateurs.
  4. L’utilisateur voit exactement ce que le développeur a conçu.

Il s’agit d’une interface utilisateur statique. Idéalement, il convient à 80 % des utilisateurs. Les 20 % restants s’en occupent. Si un utilisateur demande « Montre-moi les vols vers Paris », nous affichons une liste. Si un utilisateur demande « Comparez la météo à Paris et à Londres », nous affichons une réponse textuelle. Pourquoi? Parce que nous n’avons pas conçu de “Widget de comparaison météo”. Nous avons uniquement conçu un “Widget Liste de Vols”. Nous sommes limités par ce que nous avons prédit que l’utilisateur voudrait.

Generative UI dépasse cette limite. L’IA décide au moment de l’exécution quels composants restituer. Utilisateur : « Comparez la météo. » AI : Décide de rendre deux composants <WeatherCard /> côte à côte. Utilisateur : « Réserver un vol. » AI : Décide d’afficher un <FlightBookingForm />. L’interface s’adapte à l’intention.

Pourquoi Maison Code en parle

Chez Maison Code, nous sommes obsédés par le futur “Zéro UI”. Nous pensons que le luxe ultime réside dans une interface qui anticipe vos besoins. Pour nos clients conciergerie haut de gamme, un tableau de bord statique ne suffit pas. Si un client VIP demande « Un itinéraire de week-end à Kyto », il ne devrait pas recevoir de bloc de texte. Ils devraient obtenir une carte, une liste de réservations d’hôtel et un widget météo, générés instantanément. Nous implémentons le Vercel AI SDK et les React Server Components (RSC) pour créer ces expériences adaptatives. Nous en parlons car il s’agit du plus grand changement dans l’ingénierie frontend depuis React lui-même.

La technologie : Vercel AI SDK (RSC)

Le SDK Vercel AI (en particulier le mode « allow-rsc ») permet au LLM de diffuser des composants React dans le cadre de la réponse.

Comment ça marche (The Flow)

  1. Requête de l’utilisateur : “Montrez-moi le cours de l’action Apple.”
  2. Action du serveur : envoie une invite à GPT-4.
  3. Appel de fonction : nous fournissons des outils pour GPT-4. 
    outils : {
  show_stock : {
    description: "Afficher un graphique boursier",
    paramètres : z.object({ symbole : z.string() })
  }
}
  4. Décision LLM : GPT-4 dit “Appelez show_stock avec le symbole AAPL”.
  5. Exécution du serveur : Le serveur exécute la fonction. Mais au lieu de renvoyer JSON, il renvoie un Composant React. 
    // serveur/actions.tsx
fonction asynchrone show_stock({ symbole }) {
  const data = wait fetchStock (symbole);
  return <StockChart data={data} color="green" />;
}
  6. Streaming : L’interface utilisateur diffuse le <StockChart /> au client. Le client le restitue instantanément.

Exemple de code : créer un chat génératif

// application/action.tsx
importer { createAI, getMutableAIState, render } depuis "ai/rsc" ;
importer { z } depuis "zod" ;

const ai = créerAI({
  actions : {
    submitUserMessage : async (contenu : chaîne) => {
      "utiliser le serveur" ;
      const aiState = getMutableAIState();
      
      const ui = attendre le rendu ({
        modèle : "gpt-4-turbo",
        fournisseur : openai,
        messages : [{ rôle : "utilisateur", contenu }],
        outils : {
          get_crypto_price : {
            description : "Obtenir le prix d'une crypto-monnaie",
            paramètres : z.object({ coin: z.string() }),
            rendu : fonction asynchrone* ({ pièce }) {
              rendement <Spinner />; // Etat de chargement instantané
              prix const = attendre fetchPrice(coin);
              return <CryptoCard coin={coin} price={price} /> ; // Interface utilisateur finale
            }
          }
        }
      });
      
      return { id : Date.now(), display : ui } ;
    }
  }
});

Notez le rendement <Spinner />. C’est incroyable. L’IA reconnaît l’intention (« Je reçois le prix ») et affiche une interface utilisateur avant que les données soient prêtes. Ensuite, il remplace la roulette par la carte. Il s’agit de l’interface utilisateur de streaming.

Cas d’utilisation pour le commerce électronique

  1. Comparaison de produits : Utilisateur : « Laquelle est la meilleure pour courir, la Air Max ou la Pegasus ? » AI : génère un <ComparisonTable products={[A, B]} /> mettant en évidence le poids et l’amorti.
  2. Guide des tailles : Utilisateur : « Je mesure 6 pieds, quelle taille ? » AI : affiche un <SizeChart highlight="L" /> personnalisé.
  3. Générateur de bundles : Utilisateur : “J’ai besoin d’une tenue pour un gala.” AI : affiche un <LookBook items={[Suit, Tie, Shoes]} /> avec un bouton « Ajouter tout au panier ».

Le défi du design

L’interface utilisateur générative est un cauchemar pour les concepteurs. Vous ne pouvez pas concevoir « La Page ». Il n’y a pas de page. Vous devez concevoir un Système de composants. Vous concevez les “Atomes” (Cartes, Graphiques, Tableaux, Listes). L’IA agit en tant que “Page Builder”. Cela nécessite un Système de conception strict (voir Atomic Design) pour garantir que tout ce que l’IA assemble semble cohérent. Si des marges et une typographie parfaitement standardisées ne sont pas appliquées, la mise en page générée par l’IA semblera cassée.

Le point de vue du sceptique

“C’est de la suringénierie. Montre-moi juste le texte.” Contre-point : le texte est difficile à analyser. « Apple est en hausse de 5 % à 150 € » est plus difficile à lire qu’un graphique vert en hausse. Le cerveau traite les visuels 60 000 fois plus rapidement que le texte. L’interface utilisateur générative concerne la densité de l’information. Il nous permet de transmettre des données complexes (tableaux, graphiques) dans une interface conversationnelle sans surcharger l’utilisateur.

##FAQ

Q : Est-ce lent ? R : Oui, GPT-4 est lent. C’est pourquoi nous utilisons le Streaming. Le texte/spinner apparaît instantanément. Le composant lourd de l’interface utilisateur se charge 1 seconde plus tard. Il semble réactif.

Q : Peut-il halluciner l’interface utilisateur ? R : Il peut halluciner des arguments (par exemple, passer une chaîne à un accessoire qui a besoin d’un nombre). Cependant, l’implémentation de la validation du schéma Zod évite les plantages d’exécution. Si l’IA génère des données incorrectes, nous les captons et affichons un message d’erreur au lieu de faire planter l’interface utilisateur.

Conclusion

Nous passons du « Pointer et cliquer » au « Décrire et recevoir ». L’interface utilisateur générative est le pont. Il combine la flexibilité du chat avec la convivialité de l’interface graphique. C’est l’avenir de l’interaction logicielle.

Prêt à construire l’avenir ?

Si vous souhaitez intégrer Generative UI dans votre application à l’aide du SDK Vercel AI, Maison Code est le partenaire expert dont vous avez besoin. Nous construisons des interfaces intelligentes qui s’adaptent à vos utilisateurs.

UI qui se dessine toute seule ?

Nous construisons des expériences d’interface utilisateur génératives à l’aide du SDK Vercel AI et des composants React Server. Embauchez nos architectes.