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 ini-configure gamit ang openaiCompatible() function: isang beses kang nagtatakda ng baseURL, apiKey at isang listahan ng mga modelo, at pagkatapos ay pipili ka ng modelo para sa bawat tawag. Ang aming Gateway ay nagsasalita sa format ng Chat Completions, kaya iniiwan namin ang api: 'chat-completions' (ito ang default na halaga).

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

// Gonka provider — ini-configure nang isang beses
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: [
    'Qwen/Qwen3-235B-A22B-Instruct-2507-FP8', // default
    'moonshotai/Kimi-K2.6',
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Streaming chat sa server (halimbawa, route handler sa anumang fullstack framework o TanStack Start). Itinakda namin ang haba ng tugon sa pamamagitan ng modelOptions — ito ang tanging 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('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
    messages,
    modelOptions: { max_tokens: 8192 }, // kisame ng Qwen sa pamamagitan ng Gateway
  })

  return toServerSentEventsResponse(stream)
}

React client sa pamamagitan ng hook na useChat — nag-i-stream ng mga tugon mula sa server 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 isang script o backend nang direkta — tawagan ang chat() at basahin ang stream. Ang koneksyon sa Gonka ay pareho para sa lahat ng variant.

Mga parameter ng modelo sa pamamagitan ng Gateway: ang konteksto para sa lahat ng tatlong modelo ay 128K token. Ang kisame ng max_tokens: Qwen3-235B — 8192, Kimi K2.6 — 3072, MiniMax-M2.7 — 4096. Kung ang max_tokens ay hindi tinukoy, ang default para sa non-stream ay 1500, kaya para sa mahabang sagot, tukuyin ito nang malinaw.

Ang TanStack AI ay pantay na maginhawang gumagana sa pamamagitan ng direktang mga taripa ng OpenAI/Anthropic, at sa pamamagitan ng Gonka — tanging ang baseURL lamang ang nagbabago. Ngunit ang presyo ay nagkakaiba ng ayon sa laki. Paghambingin natin ang karaniwang mga karga ng isang production application sa TanStack AI:

Ang provider-agnostic na diskarte ng TanStack AI ay nangangahulugang ang paglipat sa Gonka ay isang pagbabago sa isang linya (baseURL), at hindi isang muling pagsusulat ng code. Bukod dito, ang iyong type-safe na mga tool, structured output, at React-hooks ay nananatiling hindi nagbabago. Para sa isang application na may libu-libong user, ang pagkakaiba ay sampu-sampung libong dolyar bawat buwan.

Presyo ng Gonka: input ~$0.0005 per 1M token, output ×3. Ito ay daan-daan–libong beses na mas mura kaysa sa direktang mga taripa ng OpenAI at Anthropic.

Ang pangunahing tampok ng TanStack AI ay ang pinag-isang kontrata ng toolDefinition(): isang tool ay inilalarawan nang isang beses (input/output sa pamamagitan ng Zod, ArkType, Valibot o JSON Schema), at ang implementasyon ay nakatali sa server o client. Ang Qwen3-235B, Kimi K2.6 at MiniMax-M2.7 ay sumusuporta sa native tool calling sa pamamagitan ng Gonka, kaya't ang mga ahente ay gumagana nang maaasahan – nang hindi nagpa-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: 'Узнать погоду в городе',
  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('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
  messages: [{ role: 'user', content: 'Какая погода в Москве?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Aling modelo ang pipiliin:

• Qwen/Qwen3-235B-A22B-Instruct-2507-FP8 – default. Ang pinakamalaking limit ng sagot (8192) at malakas na tool calling. Angkop para sa mga ahente at structured output.
• moonshotai/Kimi-K2.6 – mahusay para sa mahabang diyalogo at pagdadahilan. Limit ng sagot 3072.
• MiniMaxAI/MiniMax-M2.7 – balanse ng bilis at kalidad, limit 4096.

Salamat sa runtime adapter switching sa TanStack AI, maaaring hawakan ang lahat ng tatlong modelo sa isang provider at lumipat sa pagitan nila nang mabilis – halimbawa, mabibigat na gawain ng ahente sa Qwen, mabilis na sagot sa MiniMax.