TanStack AI + Gonka — Aplikasi AI di TypeScript dengan biaya rendah

Instalasi paket (inti + adaptor OpenAI, di mana openaiCompatible berada):

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

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

Untuk antarmuka obrolan di React, tambahkan klien dan hook:

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

Kunci API JoinGonka: jika belum ada — daftar di gate.joingonka.ai/register, dapatkan 10 juta token gratis dan buat kunci jg-xxx di Dashboard → Kunci API. Satu kunci dan satu saldo berfungsi untuk format OpenAI dan Anthropic.

Di TanStack AI, penyedia kustom yang kompatibel dengan OpenAI dikonfigurasi dengan fungsi openaiCompatible(): Anda menentukan baseURL, apiKey, dan daftar model sekali, lalu memilih model di setiap panggilan. Gateway kami menggunakan format Chat Completions, jadi kami biarkan api: 'chat-completions' (ini adalah nilai default).

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

// Penyedia Gonka — dikonfigurasi sekali
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-kunci-anda
  api: 'chat-completions',
  models: [
    'Qwen/Qwen3-235B-A22B-Instruct-2507-FP8', // default
    'moonshotai/Kimi-K2.6',
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Streaming chat di server (misalnya, route handler di kerangka kerja fullstack apa pun atau TanStack Start). Panjang respons diatur melalui modelOptions — ini satu-satunya titik untuk parameter wire asli (max_tokens, temperature):

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('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
    messages,
    modelOptions: { max_tokens: 8192 }, // batas Qwen melalui Gateway
  })

  return toServerSentEventsResponse(stream)
}

Klien React melalui hook useChat — mengalirkan respons dari server ke UI:

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('Apa itu Gonka?')}>
        Tanya
      </button>
    </div>
  )
}

Tanpa server: penyedia yang sama bekerja dalam skrip atau backend secara langsung — panggil chat() dan baca alirannya. Koneksi ke Gonka sama untuk semua varian.

Parameter model melalui Gateway: konteks untuk ketiga model — 128K token. Batas max_tokens: Qwen3-235B — 8192, Kimi K2.6 — 3072, MiniMax-M2.7 — 4096. Jika max_tokens tidak ditentukan, default untuk non-streaming — 1500, jadi untuk respons panjang, tentukan secara eksplisit.

TanStack AI berfungsi sama baiknya dengan tarif langsung OpenAI/Anthropic dan melalui Gonka — hanya baseURL yang berubah. Namun harganya berbeda jauh. Mari kita bandingkan beban aplikasi produksi tipikal pada TanStack AI:

Pendekatan agnostik penyedia TanStack AI berarti beralih ke Gonka adalah perubahan satu baris (baseURL), bukan penulisan ulang kode. Alat type-safe Anda, output terstruktur, dan React hooks tetap tidak berubah. Untuk aplikasi dengan ribuan pengguna, perbedaannya adalah puluhan ribu dolar per bulan.

Harga Gonka: input ~$0.0005 per 1M token, output ×3. Ini ratusan hingga ribuan kali lebih murah daripada tarif langsung OpenAI dan Anthropic.

Fitur utama TanStack AI adalah kontrak toolDefinition() terpadu: alat dijelaskan sekali (input/output melalui Zod, ArkType, Valibot, atau JSON Schema), dan implementasinya terikat pada server atau klien. Qwen3-235B, Kimi K2.6, dan MiniMax-M2.7 mendukung pemanggilan alat native melalui Gonka, sehingga agen bekerja dengan andal — tanpa mengurai respons teks.

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

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Dapatkan cuaca di kota',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // panggilan API Anda yang sebenarnya
})

const stream = chat({
  adapter: gonka('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
  messages: [{ role: 'user', content: 'Bagaimana cuaca di Moskow?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Model mana yang harus dipilih:

• Qwen/Qwen3-235B-A22B-Instruct-2507-FP8 — default. Batas respons terbesar (8192) dan pemanggilan alat yang kuat. Cocok untuk agen dan output terstruktur.
• moonshotai/Kimi-K2.6 — sangat baik untuk dialog panjang dan penalaran. Batas respons 3072.
• MiniMaxAI/MiniMax-M2.7 — keseimbangan kecepatan dan kualitas, batas 4096.

Berkat peralihan adaptor runtime di TanStack AI, Anda dapat menyimpan ketiga model dalam satu penyedia dan beralih di antara mereka dengan cepat — misalnya, tugas agen yang berat pada Qwen, respons cepat pada MiniMax.