AI chatbot’ları web uygulamasına entegre etmek: temel API’den Next.js’te streaming’e

Yapay zekâyı web uygulamasına entegre etmek bugünün en çok istenen özelliklerinden. Otomatik destek botlarından akıllı asistanlara chat arayüzleri standartlaşıyor. Ama LLM’in tam yanıtı 10-30 saniye sürmesi UX’i bozar. Streaming, sözcükleri üretildikçe göstererek bunu çözer.

Bu yazıda basit JSON yanıtları ile streaming farkını ve Next.js’te Server-Sent Events (SSE) ile OpenAI SDK kullanarak gerçek zamanlı chatbot arayüzünü nasıl kuracağınızı göreceğiz.

1. Standart JSON API çağrıları vs gerçek zamanlı streaming

Kullanıcı bir AI isteği tetikleyince yanıtı iletmenin iki ana yolu vardır:

• Standart JSON fetch: istemci ister ve bekler. Sunucu OpenAI ile konuşur, cümlenin bitmesini bekler, JSON bloğuna derler ve geri gönderir. Uzun yükleme göstergesi, yüksek hemen çıkma.
• Server-Sent Events (SSE) ile streaming: sunucu kalıcı HTTP bağlantısı açar. Model yeni bir token üretir üretmez tarayıcıya iter. Kullanıcı metni hemen görür; algılanan yükleme milisaniyeye iner.

2. Next.js route handler’larında backend

Next.js App Router, Web Streams ile yanıt streaming’ini native destekler. Sadeleştirilmiş bir route handler şöyle durur:

Önce OpenAI istemcisini kurar, `stream: true` ile chat completion tetikleriz. Sonra OpenAI readable stream’ini standart HTTP Response stream’ine çeviririz. Tarayıcı chunk’ları anında okur ve işler.

3. Chat UI’sini kurmak ve stream’i istemcide işlemek

Frontend’de mesajları tutmak ve yanıt stream’ini yönetmek için React state kullanırız. Standart `fetch`, `ReadableStream` reader ile streaming okuyabilir:

• Yanıt body reader’ını okuyun. `while(true)` döngüsüyle `reader.read()` ile gelen chunk’ları alın. Bu ikili chunk’ları `TextDecoder` ile metne çevirin.
• Mesaj state’ini anında güncelleyin: yeni token’ları geldikçe son mesaja ekleyin; React yeniden çizer ve sözcük akışını dinamik gösterir.
• Yeni içerik basıldıkça chat konteynerinin altına auto-scroll: son satırlar her zaman görünsün.

4. Edge case’ler ve hata yönetimi

Üretim kalitesinde chat uygulaması ekstra özen ister:

• Bağlantı kesintileri: üretim sırasında HTTP stream beklenmedik koparsa yeniden bağlanma mantığı ve uyarı state’leri.
• İstekleri iptal: UI’de «Üretimi durdur» düğmesi. Fetch’te `AbortController` ile sunucuya LLM isteğini iptal ettirin, API maliyetini yakmayın.
• Markdown ve kod render: LLM yanıtları sık Markdown tablo veya formatlı kod bloğu içerir. Yapılandırılmış layout için `react-markdown` ve syntax highlighter kullanın.

Sonuç: streaming AI ile UX’i yükseltin

Gerçek zamanlı yanıt streaming’i modern AI web uygulamaları için zorunluluktur. Server-Sent Events, Next.js route streaming ve tepkili React chat konteynerleriyle hızlı, canlı ve cilalı duran arayüzler kurarsınız.

OpenAI, Anthropic veya streaming’li yerel LLM’i iş uygulamanıza gömmek ister misiniz? Formdan yazın, düzgün kuralım.