TanStack AI + Gonka — TypeScript'te AI Uygulamaları Kuruşlara

Paket kurulumu (çekirdek + openaiCompatible içeren OpenAI adaptörü):

# pnpm
pnpm add @tanstack/ai @tanstack/ai-openai

# npm
npm install @tanstack/ai @tanstack/ai-openai

React üzerindeki sohbet arayüzü için istemci ve hook'ları ekleyin:

pnpm add @tanstack/ai-client @tanstack/ai-react

JoinGonka API anahtarı: Henüz almadıysanız gate.joingonka.ai/register üzerinden kayıt olun, 3M ücretsiz token kazanın ve Dashboard → API Keys bölümünden jg-xxx anahtarınızı oluşturun. Tek bir anahtar ve bakiye, hem OpenAI hem de Anthropic formatları için çalışır.

TanStack AI'da özelleştirilmiş OpenAI uyumlu sağlayıcı openaiCompatible() fonksiyonu ile yapılandırılır: baseURL, apiKey ve model listesini bir kez belirlersiniz ve ardından her çağrıda istediğiniz modeli seçersiniz. Gateway'imiz Chat Completions formatını kullandığı için api: 'chat-completions' değerini bırakıyoruz (bu varsayılan değerdir).

import { openaiCompatible } from '@tanstack/ai-openai'

// Gonka sağlayıcısı – bir kez yapılandırılır
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-anahtarınız
  api: 'chat-completions',
  models: [
    'MiniMaxAI/MiniMax-M2.7', // varsayılan
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // reasoning-modeli
  ],
})

Sunucuda Streaming-sohbet (örneğin herhangi bir fullstack framework'ünde veya TanStack Start'ta route-handler). Yanıt uzunluğunu modelOptions üzerinden belirliyoruz – bu, yerel wire parametreleri (max_tokens, temperature) için tek noktadır:

import { chat, toServerSentEventsResponse } from '@tanstack/ai'
import { gonka } from './gonka'

export async function POST(request: Request) {
  const { messages } = await request.json()

  const stream = chat({
    adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
    messages,
    modelOptions: { max_tokens: 8192 }, // Gateway üzerinden çıktı sınırı
  })

  return toServerSentEventsResponse(stream)
}

React istemcisi useChat hook'u üzerinden – sunucudan gelen yanıtları UI'ya akıtır:

import { useChat } from '@tanstack/ai-react'

function Chat() {
  const { messages, sendMessage, status } = useChat({ api: '/api/chat' })

  return (
    <div>
      {messages.map((m) => (
        <p key={m.id}><b>{m.role}:</b> {m.content}</p>
      ))}
      <button onClick={() => sendMessage('Gonka nedir?')}>
        Sor
      </button>
    </div>
  )
}

Sunucusuz: Aynı sağlayıcı bir script veya backend içinde doğrudan çalışır – chat() fonksiyonunu çağırın ve akışı okuyun. Gonka bağlantısı tüm varyantlar için aynıdır.

Gateway üzerinden model parametreleri: MiniMax M2.7 için 200K, DeepSeek V4 Flash için 380K ve GLM-5.3 Flash için 390K token bağlamı mevcuttur. max_tokens sınırı MiniMax M2.7 ve GLM-5.3 Flash için 8192, DeepSeek V4 Flash için 32768'dir. Eğer max_tokens belirtilmezse, non-stream için varsayılan 1500'dür, bu yüzden uzun yanıtlar için değeri açıkça belirtin.

TanStack AI, doğrudan OpenAI/Anthropic tarifeleriyle ve Gonka ile aynı şekilde rahat çalışır — sadece baseURL değişir. Ancak fiyat kat kat farklıdır. TanStack AI üzerindeki bir üretim uygulamasının tipik yüklerini karşılaştıralım:

TanStack AI'nın provider-agnostic yaklaşımı, Gonka'ya geçmenin kodu yeniden yazmak değil, tek bir satırı (baseURL) değiştirmek olduğu anlamına gelir. Bu sırada tip güvenli araçlarınız, yapılandırılmış çıktılarınız ve React hook'larınız değişmeden kalır. Binlerce kullanıcısı olan bir uygulama için fark, ayda on binlerce dolardır.

Gonka fiyatı: giriş ~$0.0069/1M token, çıkış ×3. Bu, OpenAI ve Anthropic'in doğrudan tarifelerinden yüzlerce-binlerce kat daha ucuzdur.

TanStack AI'ın ana özelliği, birleşik toolDefinition() sözleşmesidir: Bir araç bir kez tanımlanır (Zod, ArkType, Valibot veya JSON Schema aracılığıyla giriş/çıkış), uygulama ise sunucu veya istemcide bağlanır. MiniMax M2.7, DeepSeek V4 Flash ve GLM-5.3 Flash, Gonka aracılığıyla yerel tool calling'i destekler, bu sayede metin yanıtlarını ayrıştırmanıza gerek kalmadan ajanlar güvenilir bir şekilde çalışır.

import { chat, toolDefinition } from '@tanstack/ai'
import { gonka } from './gonka'
import { z } from 'zod'

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Şehirdeki hava durumunu öğren',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // gerçek API çağrınız
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'Moskova\'da hava nasıl?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Hangi model seçilmeli:

• MiniMaxAI/MiniMax-M2.7 — varsayılan, hız ve kalite dengesi, uzun bağlam. Yanıt sınırı 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — ağdaki en uzun bağlamlardan biri (380K), ucuz büyük promptlar. Yanıt sınırı 32768.
• zai-org/GLM-5.3-Flash — reasoning-model: yanıt vermeden önce akıl yürütür, karmaşık mantıkta güçlüdür; ağdaki en uzun bağlam (390K). Yanıt sınırı 8192; akıl yürütme işlemleri max_tokens kısmını harcar.

TanStack AI'daki runtime adapter switching sayesinde, üç modeli de tek bir sağlayıcıda tutabilir ve anında aralarında geçiş yapabilirsiniz — örneğin, akıl yürütme gerektiren görevlerde GLM-5.3 Flash, hızlı yanıtlar için MiniMax kullanımı.