TanStack AI + Gonka — AI Applications sa TypeScript sa Maliit na Halaga

Pag-install ng Pakete (core + OpenAI adapter, kung saan nakatira ang openaiCompatible):

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

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

Para sa chat interface sa React, idagdag ang client at hooks:

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

API Key ng JoinGonka: kung wala ka pa — magparehistro sa gate.joingonka.ai/register, kumuha ng 10M na libreng token at lumikha ng key na jg-xxx sa Dashboard → API Keys. Isang key at isang balanse ang gumagana para sa parehong OpenAI- at Anthropic-format.

Sa TanStack AI, ang custom na OpenAI-compatible provider ay nase-set up gamit ang openaiCompatible() function: tukuyin nang isang beses ang baseURL, apiKey, at listahan ng mga modelo, pagkatapos ay piliin ang modelo sa bawat tawag. Ang aming Gateway ay gumagamit ng Chat Completions format, kaya iniiwan namin ang api: 'chat-completions' (ito ang default na value).

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

// Gonka Provider — nase-set up nang isang beses
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-iyong-key
  api: 'chat-completions',
  models: [
    'moonshotai/Kimi-K2.6', // default
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Streaming-chat sa server (halimbawa, route handler sa anumang fullstack framework o TanStack Start). Itinatakda namin ang haba ng response sa pamamagitan ng modelOptions — ito ang tanging punto para sa mga native wire-parameter (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 }, // limit ng output sa pamamagitan ng Gateway
  })

  return toServerSentEventsResponse(stream)
}

React-client gamit ang useChat hook — ini-stream ang mga sagot mula sa server patungo sa 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('Ano ang Gonka?')}>
        Magtanong
      </button>
    </div>
  )
}

Walang server: gumagana ang parehong provider sa script o backend nang direkta — tawagin ang chat() at basahin ang stream. Ang koneksyon sa Gonka ay pareho para sa lahat ng opsyon.

Mga parameter ng modelo sa pamamagitan ng Gateway: ang context ng parehong modelo ay 200K tokens. Ang limit na max_tokens ay 8192 para sa lahat ng modelo sa network. Kung ang max_tokens ay hindi tinukoy, ang default para sa non-stream ay 1500, kaya para sa mahahabang sagot, itakda ito nang hayagan.

Ang TanStack AI ay gumagana nang maayos sa parehong direct rates ng OpenAI/Anthropic at sa Gonka — baseURL lang ang nagbabago. Ngunit ang presyo ay nagkakaiba nang malaki. Ihambing natin ang tipikal na workload ng isang production application sa TanStack AI:

Ang provider-agnostic approach ng TanStack AI ay nangangahulugang ang paglipat sa Gonka ay isang one-line change lang (baseURL), hindi na kailangang i-rewrite ang buong code. Kasabay nito, ang iyong type-safe tools, structured output, at React-hooks ay mananatiling hindi nagbabago. Para sa application na may libu-libong users, ang pagkakaiba ay umaabot sa libu-libong dolyar bawat buwan.

Presyo ng Gonka: input ~$0.003 kada 1M tokens, output ×3. Ito ay daan-daan hanggang libu-libong beses na mas mura kaysa sa direktang rates ng OpenAI at Anthropic.

Ang pangunahing feature ng TanStack AI ay ang iisang toolDefinition() contract: ang tool ay inilalarawan nang isang beses (input/output sa pamamagitan ng Zod, ArkType, Valibot, o JSON Schema), at ang implementasyon ay ikinakabit sa server o client. Ang Kimi K2.6 at MiniMax-M2.7 ay sumusuporta sa native tool calling sa pamamagitan ng Gonka, kaya ang mga agent ay gumagana nang maaasahan — nang walang pag-parse ng mga text response.

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

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Alamin ang panahon sa lungsod',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // iyong totoong API call
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'Ano ang panahon sa Manila?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Aling modelo ang pipiliin:

• moonshotai/Kimi-K2.6 — mahusay sa coding, pangangatwiran, at agent scenarios. Limit ng sagot ay 8192.
• MiniMaxAI/MiniMax-M2.7 — default, balanse ng bilis at kalidad, mahabang context. Limit ng sagot ay 8192.

Dahil sa runtime adapter switching sa TanStack AI, maaari mong panatilihin ang parehong modelo sa iisang provider at lumipat sa pagitan nila on-the-fly — halimbawa, mabibigat na agent task sa Kimi, mabilis na sagot sa MiniMax.