JavaScript'te AI API: fetch ile sohbet isteği

Giriş

JavaScript dünyasında yapay zeka API'lerine bağlanmak artık çok kolay. fetch API'si sayesinde sunucuya istek atıp yanıt almak satırlarca kod gerektirmiyor. Bu yazıda, bir AI sohbet APIsine nasıl istek atacağımızı adım adım göstereceğim.

İster OpenAI ister yerli alternatifler kullanın, mantık aynı. Sadece endpoint ve API anahtarını değiştirmeniz yeterli.

Temel Yapı

Fetch ile POST isteği atmak basittir. İki şey gereklidir:

• URL: API'nin çalıştığı adres
• Anahtar: Kimlik doğrulama için bearer token

İstek gövdesi JSON formatındadır. Kullanıcı mesajı, model adı ve bazen sistematik talimatlar gönderilir.

const response = await fetch('https://api.example.com/chat', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: JSON.stringify({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: 'Merhaba!' }]
  })
});

Bu kod parçacığı temel yapıdır. Kendi projenizde sadece URL ve anahtarı değiştirin.

Yanıt İşleme

API'den dönen yanıt genellikle streaming veya tam metin olabilir. Tam metin yanıtı işlemek için response.json() kullanılır.

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

Streaming yanıtlarda durum farklıdır. Her parça ayrı ayrı okunur ve ekranda anlık olarak gösterilir. Bu, kullanıcı deneyimini önemli ölçüde geliştirir.

Hata Yönetimi

API istekleri her zaman hataya yol açabilir. Ağ sorunları, geçersiz anahtarlar veya limit aşımı常见dir. Try-catch bloğu ile bu durumları yönetmek gerekir.

try {
  const result = await fetch(endpoint, options);
  if (!result.ok) throw new Error(result.statusText);
  return await result.json();
} catch (err) {
  console.error('İstek başarısız:', err.message);
}

Hata mesajlarını kullanıcıya göstermeden önce loglamak en iyisidir. Böylece sorunları takip etmek kolaylaşır.

Pratik Örnek

Tam çalışan bir örnek aşağıdadır. Bu kodu bir HTML dosyasına yapıştırarak hemen test edebilirsiniz.

<!DOCTYPE html>
<html>
<head><title>AI Sohbet</title></head>
<body>
  <textarea id="input" placeholder="Mesajınızı yazın..."></textarea>
  <button onclick="sendMessage()">Gönder</button>
  <div id="output"></div>

  <script>
    async function sendMessage() {
      const msg = document.getElementById('input').value;
      const res = await fetch('https://api.example.com/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_KEY'
        },
        body: JSON.stringify({
          model: 'gpt-4o-mini',
          messages: [{ role: 'user', content: msg }]
        })
      });
      const data = await res.json();
      document.getElementById('output').textContent = 
        data.choices[0].message.content;
    }
  </script>
</body>
</html>

Bu örnekte sadece YOUR_KEY kısmını kendi anahtarınızla değiştirin. Gerisi çalışmaya hazır hale gelir.

Sonuç

JavaScript'te fetch kullanarak AI API'lerine bağlanmak oldukça kolaydır. Temel adımlar şunlardır:

1. Doğru endpoint ve anahtarı belirleyin
2. JSON gövdesini oluşturun
3. Yanıtı işleyin
4. Hataları yönetin

Bu kalıp neredeyse tüm AI API'leri için geçerlidir. Farklı servisler arasında geçiş yapmak sadece konfigürasyon değişikliği gerektirir.

Pratik yaparak kendinizi geliştirebilirsiniz. Küçük projelerle başlayıp yavaş yavaş daha karmaşık özellikler ekleyin. Streaming, history yönetimi ve güvenlik gibi konuları araştırarak bilgi dağarcığınızı genişletin.

Unutmayın ki her API kendi özel yapısına sahiptir. Dokümantasyonu dikkatlice okumak ve test etmek en sağlam yoldur.