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 yang kompatibel dengan OpenAI dapat dikonfigurasi dengan fungsi openaiCompatible(): Anda menentukan baseURL, apiKey, dan daftar model sekali saja, lalu memilih model di setiap panggilan. Gateway kami menggunakan format Chat Completions, jadi kami membiarkan api: 'chat-completions' (ini adalah nilai default).

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

// Penyedia Gonka — dikonfigurasi sekali saja
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: [
    'moonshotai/Kimi-K2.6', // default
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Chat streaming di server (misalnya, route handler di fullstack framework apa pun atau TanStack Start). Kami menentukan panjang respons melalui modelOptions — ini adalah satu-satunya titik untuk parameter wire native (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 }, // batas output melalui Gateway
  })

  return toServerSentEventsResponse(stream)
}

React client melalui hook useChat — mengalirkan (stream) 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 langsung di skrip atau backend — panggil chat() dan baca aliran datanya. Koneksi ke Gonka sama untuk semua varian.

Parameter model melalui Gateway: konteks kedua model adalah 200K token. Batas max_tokens adalah 8192 untuk semua model di jaringan. Jika max_tokens tidak ditentukan, default untuk non-stream adalah 1500, jadi untuk respons yang 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 kita bandingkan beban kerja tipikal aplikasi produksi di TanStack AI:

Pendekatan agnostik penyedia TanStack AI berarti beralih ke Gonka hanyalah mengubah satu baris (baseURL), bukan menulis ulang kode. Pada saat yang sama, tool Anda yang aman secara tipe, output terstruktur, dan hook React tetap tidak berubah. Untuk aplikasi dengan ribuan pengguna, perbedaannya mencapai puluhan ribu dolar per bulan.

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

Fitur utama TanStack AI adalah kontrak tunggal toolDefinition(): alat dijelaskan satu kali (input/output melalui Zod, ArkType, Valibot, atau JSON Schema), dan implementasi dikaitkan di sisi server atau klien. Kimi K2.6 dan MiniMax-M2.7 mendukung native tool calling melalui Gonka, sehingga agen bekerja dengan andal — tanpa harus melakukan parsing respons teks.

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

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

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'Bagaimana cuaca di Moskow?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Model mana yang harus dipilih:

• moonshotai/Kimi-K2.6 — kuat dalam coding, penalaran, dan skenario agen. Batas respons 8192.
• MiniMaxAI/MiniMax-M2.7 — default, keseimbangan antara kecepatan dan kualitas, konteks panjang. Batas respons 8192.

Berkat runtime adapter switching di TanStack AI, Anda dapat menyimpan kedua model dalam satu penyedia dan beralih antar model dengan cepat — misalnya, tugas agen berat di Kimi, respons cepat di MiniMax.