Interface utilisateur générative : création d'un assistant météo et stock en temps réel avec des RSC en streaming

Le cycle traditionnel de requête-réponse sur le Web est mort. Au moins, il est en train de mourir pour la prochaine génération d’applications natives d’IA. Nous cessons de récupérer un bundle HTML statique et d'attendre le chargement complet de la page. Au lieu de cela, nous entrons dans l’ère de l’interface utilisateur générative, où les interfaces sont rendues en temps réel, flux par flux, directement depuis le serveur.

Dans cette étude approfondie, nous explorons comment créer un « Assistant météo et stocks », une application qui ne se contente pas de renvoyer des données, mais construit elle-même l'interface utilisateur à la volée. Nous disséquerons l'architecture derrière l'interface utilisateur de streaming, l'invocation d'outils via le schéma JSON et le point de contrôle avec état, à l'aide du SDK Vercel AI et de Next.js.

Le changement de paradigme : du statique au génératif

Dans les chapitres précédents, nous avons exploré les composants React Server (RSC) et leur capacité à dissocier l'arborescence des composants du bundle côté client. Nous avons établi que les RSC nous permettent de restituer des composants complexes et gourmands en données exclusivement sur le serveur, en envoyant uniquement la charge utile de l'interface utilisateur nécessaire au client.

Dans ce chapitre, nous étendons ce concept. Nous ne récupérons pas simplement des données et restituons un graphique statique ; nous demandons à un LLM d'agir en tant que concepteur d'interface utilisateur et récupérateur de données, orchestrant un flux de morceaux d'interface utilisateur qui s'assemblent dans le navigateur. Pour comprendre cela, nous devons décortiquer les trois piliers de cette architecture : Streaming UI, Tool Invocation via JSON Schema et Stateful Checkpointer.

Le paradigme de l’interface utilisateur de streaming : des pa...
[Courte citation de 8% de l'article original]