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 OpenAI uyumlu özel sağlayıcı openaiCompatible() fonksiyonuyla yapılandırılır: baseURL, apiKey ve model listesini bir kez tanımlarsınız, ardından her çağrıda modeli seçersiniz. Gateway'imiz Chat Completions formatını konuşur, bu yüzden api: 'chat-completions' olarak bırakıyoruz (bu varsayılan değerdir).

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

// Gonka provider: configured once
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-your-key
  api: 'chat-completions',
  models: [
    'MiniMaxAI/MiniMax-M2.7', // default
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // reasoning model
  ],
})

Sunucuda streaming sohbet (örneğin, herhangi bir fullstack framework veya TanStack Start'ta route handler). Yanıt uzunluğunu modelOptions ile belirliyoruz — bu, yerel wire parametreleri (max_tokens, temperature) için tek nokta:

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 output cap
  })

  return toServerSentEventsResponse(stream)
}

React istemcisi useChat hook'u ile — sunucudan gelen yanıtları UI'ya stream eder:

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('What is Gonka?')}>
        Ask
      </button>
    </div>
  )
}

Sunucusuz: aynı sağlayıcı bir script veya backend'de doğrudan çalışır — chat() çağırın ve akışı okuyun. Gonka'ya bağlantı tüm senaryolarda aynıdır.

Gateway üzerinden model parametreleri: bağlam — MiniMax M2.7'de 180K token, DeepSeek V4 Flash'ta 380K ve GLM-5.3 Flash'ta 390K. max_tokens üst sınırı — MiniMax M2.7 ve GLM-5.3 Flash için 8192, DeepSeek V4 Flash için 32768. max_tokens belirtilmezse, non-stream için varsayılan 1500'dür, bu yüzden uzun yanıtlar için 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.0062/1M token, çıkış ×3. Bu, OpenAI ve Anthropic'in doğrudan tarifelerinden yüzlerce-binlerce kat daha ucuzdur.

TanStack AI'nın en önemli özelliği tek bir sözleşme olan toolDefinition(): bir araç bir kez tanımlanır (giriş/çıkış Zod, ArkType, Valibot veya JSON Schema üzerinden) ve uygulaması sunucuya ya da istemciye bağlanır. MiniMax M2.7, DeepSeek V4 Flash ve GLM-5.3 Flash, Gonka üzerinden yerel tool calling destekler; bu sayede ajanlar metin yanıtlarını ayrıştırmaya gerek kalmadan güvenilir şekilde çalışır.

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

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Get the weather in a city',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // your real API call
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'What is the weather in Moscow?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Hangi modeli seçmeli:

• MiniMaxAI/MiniMax-M2.7 — varsayılan; hız ile kalite dengesi, uzun bağlam. Yanıt üst sınırı 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — ağın en uzun bağlamlarından biri (380K), büyük prompt'larda ekonomik. Yanıt üst sınırı 32768.
• zai-org/GLM-5.3-Flash — reasoning modeli: yanıtlamadan önce düşünür, karmaşık mantıkta güçlüdür; ağın en uzun bağlamı (390K). Yanıt üst sınırı 8192; düşünme süreci max_tokens'ın bir 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 muhakeme gerektiren görevleri GLM-5.3 Flash'a, hızlı yanıtları MiniMax'e.