JavaScript ile fetch Kullanarak AI API'ye Sohbet İsteği Atmak

Giriş

Yapay zeka destekli uygulamaları web projelerinize entegre etmek artık daha kolay. JavaScript'in yerleşik fetch API'si sayesinde, harici bir kütüphaneye ihtiyaç duymadan AI servislerine istek gönderebilir ve sohbet deneyimi yaratabilirsiniz. Bu rehberde, OpenAI uyumlu bir API üzerinden JavaScript ile adım adım sohbet isteği nasıl oluşturulur, adım adım anlatılacaktır.

Temel Yapı ve Hazırlık

Bir AI sohbet isteği göndermek için öncelikle bir API anahtarına ve bir uç nokta (endpoint) adresine ihtiyacınız vardır. Tarayıcı tarafında çalışacak bir JavaScript dosyasında fetch fonksiyonu, hedef URL'ye HTTP POST isteği gönderir. İstek gövdesinde model adı, mesajlar dizisi ve isteğe bağlı parametreler bulunur.

const response = await fetch("https://api.example.com/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer BURAYA_API_ANAHTARINIZI_YAZIN"
  },
  body: JSON.stringify({
    model: "model-adi",
    messages: [
      { role: "user", content: "Merhaba, nasılsın?" }
    ]
  })
});

const data = await response.json();
console.log(data.choices[0].message.content);

Bu örnek, temel bir sohbet akışının nasıl işlediğini gösterir. API anahtarınızı güvenli bir şekilde saklamalı ve asla istemci tarafında (tarayıcıda) açıkça kullanmamaya özen göstermelisiniz. Gerçek projelerde istekleri genellikle bir arka uç sunucusu üzerinden yönlendirmek güvenlik açısından daha uygun olur.

Hata Yönetimi ve Gerçek Kullanım Senaryosu

Üretim ortamında hataları yakalamak önemlidir. fetch başarılı olmayan HTTP durum kodlarında hata fırlatmaz; bu yüzden response.ok özelliğini kontrol etmek gerekir. Ayrıca, API sağlayıcısı hatası genellikle yanıt gövdesinde yer alır ve buradan yakalanabilir.

if (!response.ok) {
  const error = await response.json();
  throw new Error(error.detail || "Sohbet isteği başarısız oldu.");
}

Gerçek bir sohbet arayüzünde kullanıcıdan gelen metin, mesajlar dizisine eklenir ve bu dizi zaman içinde büyür. Her yeni istekte önceki konuşma geçmişi gönderilerek bağlam korunur. Bu yaklaşım, yapay zekanın daha tutarlı ve akıcı yanıtlar üretmesini sağlar.

Pratik İpuçları

• Zaman aşımı: fetch için AbortSignal.timeout() kullanarak isteklerin sonsuz bekleme durumunu engelleyebilirsiniz.
• İstemci tarafı güvenliği: API anahtarını doğrudan tarayıcıda kullanmak yerine, kendi sunucunuz üzerinden proxy yaparak koruyun.
• Model seçimi: Kullanım amacınıza uygun model boyutunu ve parametresini tercih edin; daha büyük modeller daha kaliteli ancak daha yavaş yanıt verir.

JavaScript ve fetch kombinasyonu, AI API'lerini projenize hızlıca dahil etmenin en pratik yollarından biridir. OpenAI uyumlu altyapıya sahip olan Sen Apicloud (apicloud.com.tr) gibi platformları değerlendirerek de bu süreci daha basit hale getirebilirsiniz. Temel bilgileri kavradıktan sonra kendi sohbet uygulamanızı veya botunuzu kolayca geliştirebilirsiniz.