Intégration des chatbots IA dans les applications Web : de l'API de base aux réponses en streaming dans Next.js

Intégrer de l’IA dans une app web est parmi les fonctionnalités les plus demandées. Bots de support, assistants : le chat est déjà la norme. Mais attendre 10-30 secondes que le LLM finisse la réponse casse l’UX. Le streaming affiche les mots au fur et à mesure.

Ici : JSON simple vs streaming, et comment monter un chat en temps réel dans Next.js avec Server-Sent Events (SSE) et le SDK OpenAI.

1. Appels API JSON standard par rapport au streaming en temps réel

Lorsqu'un utilisateur déclenche une requête AI, deux approches principales peuvent être utilisées pour fournir la réponse :

• Récupération JSON standard : le client envoie une requête et attend. Le serveur communique avec OpenAI, attend que la phrase entière soit terminée, la compile dans un bloc JSON et la renvoie. Cela provoque un long indicateur de chargement et des taux de rebond élevés.
• Streaming avec événements envoyés par le serveur (SSE) : le serveur ouvre une connexion HTTP persistante. Dès que le modèle d'IA génère un nouveau jeton (un mot ou une partie de celui-ci), le serveur le transmet au navigateur. L'utilisateur voit le texte apparaître immédiatement, réduisant ainsi le temps de chargement perçu à quelques millisecondes.

2. Implémentation du backend dans les gestionnaires de route Next.js

Next.js App Router prend en charge le streaming des réponses de manière native à l’aide de Web Streams. Voici à quoi ressemble un gestionnaire de route simplifié pour le streaming :

Tout d'abord, nous configurons le client OpenAI et déclenchons la fin du chat avec l'indicateur « stream : true ». Ensuite, nous transformons le flux lisible OpenAI en un flux de réponse HTTP standard. Le navigateur lit les morceaux et les traite à la volée.

3. Création de l'interface utilisateur de chat et du flux de traitement sur le client

Sur le frontend, nous utilisons l'état React pour conserver les messages et gérer le flux de réponses. L'API standard `fetch` est capable de lire des données en streaming à l'aide du lecteur `ReadableStream` :

• Lisez le lecteur du corps de la réponse. À l'aide d'une boucle `while(true)`, lisez les morceaux entrants à l'aide de `reader.read()`. Décodez ces morceaux binaires en chaînes de texte à l'aide de `TextDecoder`.
• Mettez à jour l'état du message en temps réel, en ajoutant les nouveaux jetons au dernier message au fur et à mesure de leur arrivée, ce qui amène React à restituer et à afficher dynamiquement le flux de mots.
• Faites défiler automatiquement vers le bas du conteneur de discussion à mesure que le nouveau contenu est imprimé afin que les dernières lignes soient toujours visibles pour l'utilisateur.

4. Gestion des cas Edge et gestion des erreurs

La création d'applications de chat de qualité production nécessite une attention particulière aux détails :

• Interruptions de connexion : implémentez une logique de reconnexion et des états d'alerte si le flux HTTP s'interrompt de manière inattendue pendant la génération.
• Abandonner les demandes : fournissez un bouton « Arrêter la génération » sur l'interface utilisateur. Utilisez `AbortController` dans vos requêtes Fetch pour dire au serveur d'annuler la requête LLM et d'arrêter de gaspiller les coûts de l'API.
• Markdown et rendu de code : les réponses LLM contiennent souvent des tableaux Markdown ou des blocs de code formatés. Utilisez des composants tels que « react-markdown » et des surligneurs de syntaxe pour afficher des mises en page structurées.

Conclusion : améliorez votre UX avec Streaming AI

Le streaming de réponses en temps réel est une nécessité pour les applications Web modernes basées sur l’IA. En utilisant les événements envoyés par le serveur, le streaming de routes Next.js et les conteneurs de discussion React réactifs, vous pouvez créer des interfaces interactives rapides, vivantes et raffinées.

Vous voulez brancher OpenAI, Anthropic ou un LLM local avec streaming dans votre app métier ? Écrivez-moi via le formulaire - on le monte proprement.