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

Instalasi paket (core + adapter OpenAI, tempat 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

API-key JoinGonka: jika belum punya — daftar di gate.joingonka.ai/register, dapatkan 3M token gratis dan buat kunci jg-xxx di Dashboard → API Keys. 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 mengatur baseURL, apiKey, dan daftar model satu kali, lalu memilih model untuk setiap panggilan. Gateway kami menggunakan format Chat Completions, jadi kami biarkan api: 'chat-completions' (nilai default).

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
  ],
})

Obrolan streaming di server (misalnya, handler rute di kerangka kerja fullstack apa pun atau TanStack Start). Kami mengatur panjang respons 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('MiniMaxAI/MiniMax-M2.7'),
    messages,
    modelOptions: { max_tokens: 8192 }, // Gateway output cap
  })

  return toServerSentEventsResponse(stream)
}

Klien React melalui hook useChat — melakukan streaming 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('What is Gonka?')}>
        Ask
      </button>
    </div>
  )
}

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

Parameter model melalui Gateway: konteks — 180K token untuk MiniMax M2.7, 380K untuk DeepSeek V4 Flash, dan 390K untuk GLM-5.3 Flash. Batas atas max_tokens — 8192 untuk MiniMax M2.7 dan GLM-5.3 Flash, 32768 untuk DeepSeek V4 Flash. Jika max_tokens tidak ditentukan, default untuk non-stream adalah 1500, jadi untuk respons panjang tentukan secara eksplisit.

TanStack AI bekerja dengan nyaman baik melalui tarif langsung OpenAI/Anthropic maupun melalui Gonka — hanya baseURL yang berubah. Namun harganya berbeda jauh. Mari bandingkan beban tipikal aplikasi production di TanStack AI:

Pendekatan provider-agnostic dari TanStack AI berarti beralih ke Gonka hanya perlu mengubah satu baris (baseURL), bukan menulis ulang kode. Tools aman-tipe, output terstruktur, dan React-hook Anda tetap tidak berubah. Untuk aplikasi dengan ribuan pengguna, perbedaannya mencapai puluhan ribu dolar per bulan.

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

Keunggulan utama TanStack AI adalah kontrak tunggal toolDefinition(): sebuah tool didefinisikan sekali saja (input/output melalui Zod, ArkType, Valibot, atau JSON Schema), lalu implementasinya diikat di server atau klien. MiniMax M2.7, DeepSeek V4 Flash, dan GLM-5.3 Flash mendukung native tool calling lewat Gonka, sehingga agen bekerja dengan andal — tanpa perlu mem-parsing respons teks.

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 },
})

Model mana yang harus dipilih:

• MiniMaxAI/MiniMax-M2.7 — pilihan default, seimbang antara kecepatan dan kualitas, dengan konteks panjang. Batas respons 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — salah satu konteks terpanjang di jaringan ini (380K), cocok untuk prompt besar dengan biaya murah. Batas respons 32768.
• zai-org/GLM-5.3-Flash — model reasoning: bernalar sebelum menjawab, unggul dalam logika rumit; konteks terpanjang di jaringan ini (390K). Batas respons 8192; proses bernalar memakai sebagian dari max_tokens.

Berkat runtime adapter switching di TanStack AI, Anda bisa menyimpan ketiga model dalam satu penyedia dan berpindah di antara ketiganya secara instan — misalnya, tugas bernalar ke GLM-5.3 Flash, respons cepat ke MiniMax.