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 na provider ay kino-configure gamit ang function na openaiCompatible(): isang beses mong itatakda ang baseURL, apiKey at listahan ng mga model, pagkatapos ay pipiliin ang model para sa bawat tawag. Ang aming Gateway ay nagsasalita sa format na Chat Completions, kaya iiwan namin ang api: 'chat-completions' (ito ang default na halaga).

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

Streaming chat sa server (halimbawa, route handler sa anumang fullstack framework o TanStack Start). Itatakda natin ang haba ng sagot sa pamamagitan ng modelOptions — ito ang nag-iisang punto para sa native wire parameters (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)
}

React client sa pamamagitan ng useChat hook — nag-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('What is Gonka?')}>
        Ask
      </button>
    </div>
  )
}

Walang server: gumagana nang direkta ang parehong provider sa isang script o backend — tawagin ang chat() at basahin ang stream. Pareho ang koneksyon sa Gonka para sa lahat ng variant.

Mga parameter ng model sa pamamagitan ng Gateway: ang context — 180K token sa MiniMax M2.7, 380K sa DeepSeek V4 Flash at 390K sa GLM-5.3 Flash. Ang kisame ng max_tokens — 8192 sa MiniMax M2.7 at GLM-5.3 Flash, 32768 sa DeepSeek V4 Flash. Kung hindi tinukoy ang max_tokens, ang default para sa non-stream ay 1500, kaya para sa mahahabang sagot, itakda ito nang tahasan.

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.0062 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 tampok ng TanStack AI ay ang nag-iisang kontrata na toolDefinition(): isang beses lang idescribe ang tool (input/output gamit ang Zod, ArkType, Valibot o JSON Schema), at ang implementasyon ay ikinakabit sa server o client. Sinusuportahan ng MiniMax M2.7, DeepSeek V4 Flash at GLM-5.3 Flash ang native na tool calling sa pamamagitan ng Gonka, kaya maaasahan ang mga agent — walang pag-parse ng mga text na sagot.

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

Alin ang modelong pipiliin:

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

Salamat sa runtime adapter switching sa TanStack AI, maaari mong hawakan ang lahat ng tatlong modelo sa isang provider at lumipat sa kanila nang real-time — halimbawa, mga gawaing may pag-iisip sa GLM-5.3 Flash, mabibilis na sagot sa MiniMax.