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

Pag-install ng packages (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

JoinGonka API key: kung wala pa — mag-register sa gate.joingonka.ai/register, kumuha ng 3M libreng tokens at lumikha ng jg-xxx key sa Dashboard → API Keys. Ang isang key at isang balance ay gumagana para sa OpenAI at Anthropic formats.

Sa TanStack AI, ang custom na OpenAI-compatible provider ay nase-set up gamit ang function na openaiCompatible(): itakda ang baseURL, apiKey, at listahan ng mga modelo nang isang beses, at 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 halaga).

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

// Gonka Provider — naka-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: [
    'MiniMaxAI/MiniMax-M2.7', // default
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // reasoning-model
  ],
})

Streaming-chat sa server (halimbawa, route-handler sa kahit anong fullstack-framework o TanStack Start). Ang haba ng sagot ay itinatakda 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 }, // output ceiling sa pamamagitan ng Gateway
  })

  return toServerSentEventsResponse(stream)
}

React-client sa pamamagitan ng useChat hook — nag-i-stream ng 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: ang parehong provider ay gumagana sa script o backend nang direkta — tawagin ang chat() at basahin ang stream. Ang koneksyon sa Gonka ay pareho para sa lahat ng mga opsyon.

Mga parameter ng modelo sa pamamagitan ng Gateway: context — 200K tokens para sa MiniMax M2.7, 380K para sa DeepSeek V4 Flash, at 390K para sa GLM-5.3 Flash. Ceiling na max_tokens — 8192 para sa MiniMax M2.7 at GLM-5.3 Flash, 32768 para sa DeepSeek V4 Flash. Kung ang max_tokens ay hindi tinukoy, ang default para sa non-stream ay 1500, kaya para sa mahahabang sagot, itakda ito nang malinaw.

Ang TanStack AI ay kasing-daling gamitin sa mga direct rate ng OpenAI/Anthropic at sa Gonka — baseURL lang ang nagbabago. Pero ang presyo ay nagkakaiba nang malaki. Ihambing natin ang mga tipikal na load ng production-application sa TanStack AI:

Ang provider-agnostic na approach ng TanStack AI ay nangangahulugang ang paglipat sa Gonka ay isang line change lang (baseURL) at hindi pag-rewrite ng code. Bukod pa rito, ang iyong type-safe tools, structured output, at React-hooks ay mananatiling pareho. Para sa application na may libu-libong users, ang pagkakaiba ay aabot ng libu-libong dolyar kada buwan.

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

Ang pangunahing feature ng TanStack AI ay ang iisang kontrata na toolDefinition(): 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 MiniMax M2.7, DeepSeek V4 Flash, at GLM-5.3 Flash ay sumusuporta sa native tool calling sa pamamagitan ng Gonka, kaya ang mga ahente 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 } // ang iyong tunay na API call
})

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

Anong modelo ang pipiliin:

• MiniMaxAI/MiniMax-M2.7 — default, balanse ng bilis at kalidad, mahabang konteksto. Limitasyon ng sagot 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — isa sa pinakamahabang konteksto sa network (380K), murang malalaking prompt. Limitasyon ng sagot 32768.
• zai-org/GLM-5.3-Flash — reasoning-model: nag-iisip bago sumagot, mahusay sa kumplikadong lohika; pinakamahabang konteksto sa network (390K). Limitasyon ng sagot 8192; ang pag-iisip ay gumagamit ng bahagi ng max_tokens.

Dahil sa runtime adapter switching sa TanStack AI, maaari mong panatilihin ang lahat ng tatlong modelo sa iisang provider at lumipat sa pagitan nila nang mabilisan — halimbawa, mga gawaing nangangailangan ng pag-iisip sa GLM-5.3 Flash, at mabilis na sagot sa MiniMax.