Integrare chatbot IA nel web: dall’API di base allo streaming in Next.js

Mettere IA in un’app web è tra le feature più chieste oggi. Bot di supporto, assistenti personali: la chat è già standard. Ma aspettare 10-30 secondi che il LLM finisca la risposta distrugge la UX. Lo streaming mostra le parole man mano che escono.

Qui: JSON semplice vs streaming, e come montare una chat in tempo reale in Next.js con Server-Sent Events (SSE) e l’SDK OpenAI.

1. API JSON standard vs streaming in tempo reale

Quando l’utente spara una request IA, ci sono due modi di consegnare la risposta:

• Fetch JSON standard: il client invia e aspetta. Il server parla con OpenAI, aspetta la frase intera, la impacchetta in JSON e la restituisce. Loader lungo, rimbalzo alto.
• Streaming con Server-Sent Events (SSE): il server apre una connessione HTTP persistente. Appena il modello genera un token, lo manda al browser. L’utente vede il testo all’istante: il tempo percepito scende a millisecondi.

2. Backend nei route handler di Next.js

L’App Router di Next.js fa streaming nativo con Web Streams. Un route handler semplificato:

Prima, il client OpenAI e la chat completion con `stream: true`. Poi, il ReadableStream di OpenAI diventa un HTTP response stream. Il browser legge i chunk al volo.

3. UI della chat e lo stream sul client

Nella UI, lo state di React tiene i messaggi e il flusso. `fetch` già legge lo streaming con il reader di `ReadableStream`:

• Leggete il reader del body. In un ciclo `while (true)`, `reader.read()`. Decodificate i chunk binari in testo con `TextDecoder`.
• Aggiornate lo state del messaggio in tempo reale: aggiungete i token all’ultimo messaggio man mano che arrivano. React re-renderizza e mostra il flusso di parole.
• Auto-scroll in fondo al contenitore della chat man mano che entra contenuto, perché vediate sempre le ultime righe.

4. Edge case ed errori

Una chat di produzione chiede più dettaglio:

• Tagli di connessione: riconnessione e stati di alert se lo stream HTTP si taglia a metà generazione.
• Annullare: un pulsante «Ferma generazione». `AbortController` nel fetch perché il server cancelli la request al LLM e smetta di bruciare API.
• Markdown e codice: il LLM spesso restituisce tabelle markdown o blocchi di codice. Usate `react-markdown` e un syntax highlighter per dipingere layout strutturati.

Conclusione: alzate la UX con lo streaming IA

Lo streaming in tempo reale non è extra: è necessità in un web con IA. SSE, route streaming di Next.js e un contenitore di chat in React: interfacce che si sentono rapide, vive e lucide.

Volete integrare OpenAI, Anthropic o un LLM locale con streaming nella vostra app? Scrivetemi dal form e lo montiamo per bene.