JavaScript fetch ile AI API'ye sohbet isteği nasıl gönderilir?

AI API'leri günümüzde uygulamalara zekâ katmanın en pratik yollarından biri haline geldi. Bu rehberde, JavaScript ile fetch kullanarak bir AI sohbet API'sine nasıl istek göndereceğinizi adım adım anlatıyorum. Anlatım sırasında OpenAI uyumlu API endpoint'lerinden genel bir örnek kullanacağız.

Hazırlık: API Anahtarınızı Güvence Altına Alın

API entegrasyonuna başlamadan önce bir API anahtarına ihtiyacınız var. Genellikle bu anahtarı kayıt olduktığınız platform üzerinden alırsınız. Anahtarı asla istemci tarafında (tarayıcıda) doğrudan kodunuza gömmeyin; çünkü bu durumda anahtar herkes tarafından görünür olur. Bunun yerine anahtarı bir ortam değişkeni (process.env veya .env dosyası) olarak saklayın ve istek göndermeden önce buradan çekin.

Eğer bir backend katmanız varsa, API anahtarını bu katmanda tutmak en güvenli yaklaşımdır. İstemci, sadece sizin sunucunuza istek gönderir ve sunucunuz anahtarı kullanarak AI servisine ulaşıp yanıtı geri iletir.

Temel Sohbet İsteği Oluşturma

JavaScript'te fetch fonksiyonu ile bir AI sohbet API'sine istek göndermek oldukça basittir. Aşağıdaki örnekte bir sohbet mesajı gönderip yanıtı alıyoruz:

async function sendChatMessage(prompt) {
  const response = await fetch('https://apicloud.com.tr/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_API_KEY'
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: [{ role: 'user', content: prompt }]
    })
  });

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

sendChatMessage('JavaScript nedir? Kısa açıkla.');

Bu kod parçasında POST metoduyla JSON formatında bir istek gönderiliyor. messages dizisi, sohbetin akışını temsil eder. Her mesajın bir role (kullanıcı veya sistem) ve content (mesaj metni) değeri bulunur.

Hata Yönetimi ve Akıllı Yaklaşımlar

API isteklerinde hata alma ihtimaliniz her zaman vardır. Ağ sorunları, geçersiz anahtarlar veya kota aşımı gibi durumlarla karşılaşabilirsiniz. Bu yüzden try-catch bloğu kullanmak önemlidir:

async function sendChatMessage(prompt) {
  try {
    const response = await fetch('https://apicloud.com.tr/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
      },
      body: JSON.stringify({
        model: 'gpt-4o-mini',
        messages: [{ role: 'user', content: prompt }]
      })
    });

    if (!response.ok) {
      throw new Error(`HTTP Hatası: ${response.status}`);
    }

    const data = await response.json();
    return data.choices[0].message.content;
  } catch (error) {
    console.error('İstek başarısız:', error.message);
    return null;
  }
}

response.ok kontrolü, API'nin başarılı bir yanıt döndüğünü doğrular. Hata durumunda da kullanıcıya anlaşılır bir mesaj göstermek, deneyimi önemli ölçüde iyileştirir.

Çoklu Mesaj ve Sohbet Geçmişi

Tek seferlik istekler yerine geçmiş mesajları da içeren bir sohbet deneyimi kurmak istiyorsanız, messages dizisine önceki diyalogları ekleyebilirsiniz:

const conversationHistory = [
  { role: 'system', content: 'Sen yardımcı bir asistansın.' },
  { role: 'user', content: 'Merhaba!' },
  { role: 'assistant', content: 'Merhaba! Size nasıl yardımcı olabilirim?' },
  { role: 'user', content: 'Hava durumu nasıl?' }
];

body: JSON.stringify({
  model: 'gpt-4o-mini',
  messages: conversationHistory
})

Bu şekilde AI, önceki konuşmaları hatırlayarak daha bağlamsal yanıtlar üretebilir. System rolündeki mesaj, AI'nın kişiliğini ve davranışlarını belirlemek için güçlü bir araçtır.

Sonuç

JavaScript ile fetch kullanarak bir AI sohbet API'sine istek göndermek, temel HTTP bilgisiyle mümkündür. Doğru başlıkları ayarlamak, JSON gövdesini doğru şekil tanımlamak ve hata yönetimini ihmal etmemek, sorunsuz bir entegrasyon için yeterlidir. API anahtarınızı güvende tutmayı ve isteklerinizi anlamlı hata mesajlarıyla desteklemeyi unutmayın.