La première fois que j'ai câblé une réponse LLM qui diffusait jeton par jeton au lieu d'arriver en bloc après 4 secondes, je l'ai expédiée en production le même après-midi. La différence de vitesse perçue est évidente pour quiconque a utilisé ChatGPT et a ensuite essayé un concurrent non-streaming. Les utilisateurs attendront 8 secondes s’ils peuvent voir le curseur bouger. Ils n’attendront pas 4 secondes pour un écran vide.
Ce didacticiel parcourt la pile complète à partir de zéro. À la fin, vous disposez d'une route API Next.js fonctionnelle qui diffuse à partir d'un LLM sur des événements envoyés par le serveur, une interface qui analyse le flux manuellement avecFlux lisible, puis la même interface utilisateur reconstruite avec le SDK Vercel AIutiliserChatcrochet pour que vous puissiez voir ce que l'abstraction vous achète réellement.
| Couche | Ce que vous construisez | API clé |
|---|---|---|
| Itinéraire Next.js | Diffuse la sortie LLM en tant que SSE | fluxTexte+toUIMessageStreamResponse |
| Client vanille | Analyse le flux à la main | Flux lisible,TextDecoderStream |
| Réagir 19 client | Etat géré + annulation | utiliserChatdepuisai/réagir |
| Cas extrêmes | Contre-pression, annulation, morceaux d'outils | Abandonner le contrôleur, garde JSON partielle |
Une récupération standard est renvoyée une fois que l'ensemble du corps de la réponse est prêt. Pour les réalisations courtes, c'est très bien. Pour tout ce qui dépasse 100 jetons, les utilisateurs voient une flèche, puis un mur de texte, puis une confusion quant à savoir si l'application est rapide ou lente.
Le streaming change la forme de cette expérience. Le premier jeton arrive en moins de 300 ms pour la plupart des modèles hébergés. L'utilisateur commence à lire pendant que le modèle est encore en train d'écrire. La latence perçue diminue de 60 à 70 pour cent même si le temps total nécessaire pour terminer la réponse ne change pas.
La transparence des coûts est la deuxième raison de s’en soucier. Lorsque vous diffusez, vous comptez les jetons au fur et à mesure qu'ils arrivent. Si votre itinéraire a un plafond budgétaire et que la réponse va le dépasser, vous pouvez réduire le flux à 800 jetons sans jamais attendre l'achèvement complet. Cette coupure n'est pas possible avec un appel bloquant.
Voici comment les éléments se connectent pour une demande ...
[Courte citation de 8% de l'article original]