Concevoir des interfaces de streaming

La réponse en streaming est la surface la plus sous-designée des logiciels modernes. La plupart des équipes ont livré un hook fetch en TypeScript, l'ont branché sur une div et ont appelé ça du design produit. Résultat : une machine à écrire qui se prend pour une interface.

Le streaming, ce n'est pas du texte qui apparaît. C'est un modèle d'interaction avec un rythme, des pauses, un comportement de scroll, des affordances d'interruption et des signaux de confiance. Une équipe qui ne conçoit que la saisie a livré la moitié d'un produit. La zone de sortie est l'autre moitié, et c'est là que la plupart des produits IA perdent l'utilisateur.

Cet article est la version opérationnelle. Ce qu'est vraiment une UI de streaming, les cinq couches que livre toute bonne interface, des analyses de produits réels, les anti-patterns qui tuent les surfaces en production, et un audit avant mise en ligne.

Une UI de streaming est une surface, pas une boucle fetch

Une UI de streaming est toute la zone que l'utilisateur relit pendant que le modèle tourne. Le texte visible n'en est qu'une partie. La cadence, le curseur, le comportement de scroll, les engagements structurels, les contrôles d'interruption et l'état post-stream forment le reste.

Cette surface a des propriétés mesurables. Time-to-first-token. Cadence des tokens. Engagement structurel. Latence d'interruption. Signal de complétion. Affordances post-stream. Ignorez l'une d'elles et le stream n'est plus qu'un effet de bord d'une API, pas un composant designé.

Cursor, Claude, v0, Lovable, Linear AI, Raycast AI. Aucun ne traite le streaming comme une sortie brute de tokens. Chacun livre une surface structurée. C'est ça, le niveau à atteindre.

Les cinq couches d'une grande surface de streaming

Cinq couches, dans l'ordre où l'utilisateur les vit. Une UI de streaming qui en livre moins de quatre est incomplète.

Le time-to-first-token est le moment où le vide devient un retour visuel. Le rythme des tokens, c'est ce que le stream donne à sentir une fois lancé. L'engagement structurel, c'est la façon dont la surface gère listes, tableaux et code sans reflow. Interruption et édition, c'est l'issue de secours de l'utilisateur. La complétion, c'est le moment où le stream se termine et où l'artefact devient interactif. Sautez une couche et le stream pourrit à partir d'elle.

Couche 1 : Time-to-first-token

Les 200 premières millisecondes décident si l'utilisateur fait confiance à la surface. Sous 200 ms avec un vrai signal de retour, c'est perçu comme instantané. Au-delà de 800 ms sans retour, l'utilisateur est déjà en train de conclure que le produit est cassé.

Les choix sont concrets. Un squelette qui pré-alloue la zone de sortie. Un curseur clignotant. Une affordance de points de saisie. Un préfixe de streaming où une phrase connue comme « Voici » arrive en 300 ms avant le contenu.

Les trois points de ChatGPT fonctionnent parce qu'ils sont honnêtes. La pulsation en dégradé de Claude en est la mise à niveau : une bande animée douce qui signale que la surface est vivante sans s'engager sur un faux contenu. Cursor affiche une fine ligne de curseur et une puce de statut qui nomme ce qui se passe. Dans chaque cas, l'utilisateur regarde quelque chose en moins de 200 ms.

Le vide est l'échec. Une zone blanche qui traîne 600 ms apprend à l'utilisateur que l'IA est quelque chose qu'on attend en subissant. Livrez le curseur avant de livrer le modèle.

Couche 2 : Rythme des tokens

Les flux bruts de tokens sont saccadés. Un modèle qui émet quatre tokens, puis vingt, puis un, ressemble à un terminal qui bugue, même quand la livraison sous-jacente est correcte. Le rythme est une décision de design.

La solution est une cadence lissée. Mettez les tokens entrants en tampon pendant 30 à 60 millisecondes, puis affichez à un débit régulier. L'utilisateur lit à 250 à 400 mots par minute : la cible est donc un stream qui arrive à la vitesse de lecture, ou juste au-dessus, sans pics. Claude a adopté cette discipline très tôt.

Les primitives d'UI de streaming de Vercel dans v0 reprennent la même idée : une boucle de rendu qui découple le réseau de la mise à jour visuelle. Le flux de tokens de l'API est une couche. Le flux visuel en est une autre. Les deux ne devraient jamais être confondus.

Le curseur compte. Un curseur qui suit le dernier token affiché, avec un léger fondu en traîne, ancre le regard. Sans lui, l'œil saute partout pour chercher où en est le stream. Le curseur de Cursor dans son composer n'est pas une coïncidence de nom.

Couche 3 : Engagement structurel

La couche la plus difficile. La prose plate est facile. Un stream qui s'engage dans une liste, un tableau, un bloc de code ou un graphique en pleine réponse, c'est là que la plupart des surfaces cassent.

La version naïve, c'est le markdown-en-streaming. Le moteur de rendu parse chaque chunk, la mise en page se recalcule à chaque commit, la liste se renumérote, le bloc de code change de police en cours de route, la page saute. Chaque reflow est une taxe sur l'attention.

La bonne version engage la structure dès qu'elle est détectable, puis fait couler le contenu dans la mise en page engagée sans reflow. Une liste réserve sa place dès que le premier tiret arrive. Un bloc de code réserve un panneau monospace dès les triples backticks. Un tableau fixe immédiatement son nombre de colonnes. Le streaming de diff de Cursor est le cas d'école. Le panneau de diff réserve la mise en page, les chemins de fichiers arrivent en premier, les lignes individuelles se déversent dans des rangées pré-allouées. Le streaming sensible à la sélection de v0 applique le même schéma côté canvas.

Les suggestions structurées de Linear AI livrent l'engagement sans jamais montrer d'état « chargement ». La suggestion arrive comme un objet typé, les champs se remplissent dans l'ordre des dépendances, le workflow ne bloque jamais. Linear livre du travail, les autres livrent des transcriptions.

Couche 4 : Interruption et édition

Une UI de streaming sans interruption est hostile. L'utilisateur regarde le modèle écrire quelque chose dont il sait déjà que c'est faux, et la seule issue est de fermer l'onglet. Ce n'est pas un produit. C'est une prise d'otage avec un compteur de tokens.

Le bouton stop est l'élément le moins cher et au plus fort levier de la surface. Visible dès le premier token, pas après le token 100. Claude, Cursor, ChatGPT et v0 en livrent tous un. La plupart des UI de chat maison l'oublient.

L'interruption est le plancher. L'édition est le plafond. Le schéma que la plupart des équipes n'ont pas encore mérité, c'est l'édition en direct, où l'utilisateur révise le prompt en plein stream et la surface se réoriente. L'accept et reject de Cursor pendant le streaming est la version livrée la plus proche. L'utilisateur lit le diff au fur et à mesure, accepte les parties qui marchent, rejette celles qui ne marchent pas. C'est une vraie boucle d'interaction.

Le regenerate de ChatGPT fait contraste. Le bouton écrase la réponse précédente, l'utilisateur perd la version qu'il aimait. Régénérer en écrasant est destructeur. Régénérer en branche, c'est du design. La surface d'historique de Claude livre la branche.

Couche 5 : Complétion et post-stream

Le moment où le stream se termine est un moment de design. La plupart des produits le traitent comme un non-événement. Le stream s'arrête, le curseur disparaît, l'utilisateur fixe un mur de texte en se demandant quoi faire ensuite.

La matérialisation d'artefacts de Claude est l'étalon-or. Le texte en streaming reçoit un discret signal de complétion, et le panneau d'artefact passe de l'aperçu en streaming à la surface interactive dans le même temps. L'utilisateur n'a pas « fini de lire », il est désormais « dans l'artefact ». La transition est tout l'enjeu.

Le swap de preview de v0 est la version côté design. Le code en streaming se termine, l'iframe de preview live se recharge avec le build final, le bouton de déploiement apparaît. Trois états, une transition, aucun temps mort.

Le diff-to-accept de Cursor est le troisième schéma. Le stream se termine, le diff reste éditable, accept et reject restent là, le fichier n'est pas commité tant que l'utilisateur ne le dit pas. Le stream est fini, la décision ne l'est pas. Cette séparation est ce qui fait que la surface ressemble à un outil plutôt qu'à un journal de chat.

La mauvaise version termine le stream et ne livre rien. Le curseur s'éteint, la prose reste là, l'utilisateur copie le texte dans un autre outil pour vraiment s'en servir. Un pipeline de copier-coller avec un modèle accroché dessus.

Analyses de produits réels

Cursor combine composer-streaming et matérialisation de diff. Le composer streame le plan, le panneau de diff streame le patch, accept et reject restent actifs, l'état post-stream est un diff en attente que l'utilisateur possède. Chaque couche est touchée.

Claude livre un rythme de tokens lissé et un swap vers le panneau d'artefact. Pulsation en dégradé avant le premier token, cadence régulière, matérialisation de l'artefact à la complétion, historique de conversation qui se ramifie. La surface paraît designée parce que chaque transition l'a été.

v0 livre un streaming piloté par la sélection avec preview live. L'utilisateur clique sur une zone du canvas, le prompt se cadre tout seul, le stream arrive sous forme de code et de previews qui s'échangent dans l'iframe. La complétion passe la main à un bouton de déploiement.

ChatGPT est la référence de base. Streaming de tokens avec retour en trois points, regenerate en écrasement, branch-from-here comme ajout récent. Le défaut de la catégorie, pas le niveau à atteindre.

Vercel AI Playground, Lovable, Anthropic Computer Use, Raycast AI et GitHub Copilot Workspace livrent chacun des morceaux. Vercel expose le sélecteur de modèle en direct pendant le stream. Lovable applique le schéma stream-to-app : l'utilisateur regarde son app se construire en temps réel. Computer Use streame captures d'écran et trace de raisonnement en parallèle. Raycast streame dans une micro-surface de palette de commandes. Copilot Workspace livre un streaming plan-puis-exécution avec points de contrôle.

Les cinq règles

1. Montrez un retour en moins de 200 millisecondes. Un curseur, une pulsation, un point de saisie, un préfixe de streaming. Tout sauf le vide.
2. Lissez la cadence. Mettez le flux réseau en tampon, affichez à la vitesse de lecture, ancrez le curseur. La saccade est un échec de design, pas une condition réseau.
3. Engagez la structure sans reflow. Réservez la mise en page dès qu'une liste, un tableau ou un bloc de code est détectable. Ne reflowez jamais.
4. Livrez le bouton stop avant le token 100. Visible. Accessible. Un clic. Sans exception.
5. Concevez le moment après le stream aussi soigneusement que le stream. La complétion est un passage de relais. Le passage de relais, c'est le produit.

Les anti-patterns qui tuent les streams en production

Le spinner mort. Un spinner tourne pendant que le modèle streame derrière une couche de rendu fermée. Supprimez le spinner. Livrez le stream.

La saccade de tokens. Sortie brute de tokens, aucun tampon, cadence qui oscille entre rafales et pauses. Lissez-la.

L'auto-scroll qui combat l'utilisateur. La page défile automatiquement pour suivre le stream pendant que l'utilisateur lit un paragraphe plus haut. Détectez le scroll manuel, suspendez l'auto-scroll jusqu'à ce que l'utilisateur se réancre. Claude et Cursor gèrent ça.

L'erreur du bouton stop absent. Interruption enterrée dans un menu de réglages, ou qui n'apparaît qu'après 30 secondes, ou qui n'existe pas. Visible dès le premier token.

Le stream qui se termine et laisse l'utilisateur hagard. Aucun signal de complétion, aucune étape suivante. Concevez le post-stream.

Le regenerate destructeur. La nouvelle réponse écrase l'ancienne, l'utilisateur perd la version qu'il aimait. Régénérez en branche, jamais en écrasement.

Le markdown brut en streaming. Le moteur de rendu reflowe à chaque chunk, la page saute. Engagez la structure une fois, streamez dans une mise en page réservée.

Les correctifs sont petits. Les surfaces qui les livrent ressemblent à 2026. Celles qui ne le font pas ressemblent à des barres latérales de chat de 2022 branchées sur un modèle de 2026.

L'audit de surface de streaming

Passez ces points en revue sur toute surface de streaming IA avant sa mise en production.

1. Premier retour. La surface montre-t-elle quelque chose dans les 200 millisecondes suivant l'envoi ?
2. Cadence. Le flux de tokens est-il lissé à la vitesse de lecture, ou est-ce de la saccade réseau brute ?
3. Engagement structurel. La surface réserve-t-elle la mise en page des listes, tableaux et blocs de code avant l'arrivée du contenu ?
4. Affordance d'arrêt. Le bouton stop est-il visible dès le premier token, en un clic ?
5. Affordance d'édition. L'utilisateur peut-il réviser, accepter ou rejeter en plein stream ?
6. Design de la complétion. Le moment où le stream se termine passe-t-il la main à une vraie étape suivante ?
7. Artefact post-stream. La sortie est-elle interactive après le stream, ou juste une transcription figée ?

Une surface qui passe les sept points ressemble à un composant designé. Une surface qui en rate trois ou plus ressemble à un console log avec un modèle accroché dessus. L'écart, c'est ce qui sépare le design de produit AI-native de l'IA greffée après coup.

Les équipes qui livrent des surfaces de streaming avec autant de soin sont les mêmes qui traitent les surfaces de prompt comme de vrais composants côté saisie, et qui conçoivent pour la latence de l'IA au niveau du système. Associez-le aux états vides, aux patterns d'UI d'agents et aux signaux de confiance pour que la sortie en streaming mérite d'être lue.

FAQ

Qu'est-ce que le design d'UI de streaming ?

Le design d'UI de streaming est la discipline qui façonne la manière dont la sortie de l'IA apparaît à l'écran pendant que le modèle la génère. Elle couvre le time-to-first-token, la cadence des tokens, l'engagement structurel, les affordances d'interruption et l'artefact post-stream. Une UI de streaming n'est pas une textarea qui se remplit de texte. C'est une surface designée avec des propriétés mesurables, et les produits qui gagnent aujourd'hui la traitent ainsi.

Pourquoi le streaming de tokens ne se ressent-il pas pareil d'un produit à l'autre ?

Parce que la cadence est une décision de design, pas un résultat réseau. Un flux brut de tokens est saccadé. Un flux mis en tampon et lissé arrive à la vitesse de lecture. Claude lisse la cadence avec une boucle de rendu qui découple le réseau de la mise à jour visuelle. ChatGPT reste plus proche de la livraison brute. Même classe de modèle, ressenti de surface différent.

Quelle est l'erreur de streaming UI la plus courante ?

Livrer un stream sans bouton stop visible. L'utilisateur regarde le modèle écrire quelque chose qu'il sait faux et n'a aucune issue. Autres échecs fréquents : spinners morts, auto-scroll qui combat l'utilisateur, regenerate destructeur, markdown brut qui reflowe à chaque chunk, et une complétion qui ne passe la main à rien. Chacun se corrige avec un petit changement de surface.

Construisez le stream comme si c'était la toile

La zone de sortie en streaming est la nouvelle toile. Les produits IA vivent ou meurent selon ce que cette surface fait ressentir dans les 800 premières millisecondes et selon sa lisibilité tout au long d'une réponse de 30 secondes. La plupart des équipes la traitent comme une machine à écrire. Celles qui placent la barre haut la traitent comme une infrastructure.

Livrez les cinq couches. Lancez l'audit. Évitez les anti-patterns. Le produit qui en sort ressemble à un outil plutôt qu'à une barre latérale de chat qui fait semblant d'en être un.

Si vous voulez une équipe qui livre les surfaces de streaming comme des composants à part entière plutôt que comme des boucles de tokens greffées après coup, engagez Brainy. Nous concevons l'UI de produits AI-native de bout en bout, du premier token à l'artefact post-stream, avec les signaux de confiance et les affordances d'interruption intégrés avant que le premier utilisateur n'appuie sur envoyer.