TanStack AI + Gonka — AI applications in TypeScript for pennies

Install packages (core + OpenAI adapter, which contains openaiCompatible):

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

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

For a React chat interface, add the client and hooks:

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

JoinGonka API key: If you don't have one yet, register at gate.joingonka.ai/register, get 10M free tokens, and create a jg-xxx key in Dashboard → API Keys. One key and one balance work for both OpenAI and Anthropic formats.

In TanStack AI, a custom OpenAI-compatible provider is configured with the openaiCompatible() function: you set the baseURL, apiKey, and list of models once, then select a model for each call. Our Gateway speaks the Chat Completions format, so we leave api: 'chat-completions' (this is the default value).

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

Streaming chat on the server (e.g., a route handler in any fullstack framework or TanStack Start). Set the response length via modelOptions—this is the only place for 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 }, // Qwen ceiling via Gateway
  })

  return toServerSentEventsResponse(stream)
}

React client via the useChat hook—streams responses from the server to the 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>
  )
}

Without a server: the same provider works directly in a script or backend—call chat() and read the stream. Connecting to Gonka is the same for all options.

Model parameters via Gateway: the context for all three models is 128K tokens. max_tokens ceiling: Qwen3-235B — 8192, Kimi K2.6 — 3072, MiniMax-M2.7 — 4096. If max_tokens is not specified, the default for non-stream is 1500, so for long responses, set it explicitly.

TanStack AI works equally well with direct OpenAI/Anthropic rates and through Gonka — only the baseURL changes. But the price differs by orders of magnitude. Let's compare typical production application loads on TanStack AI:

TanStack AI's provider-agnostic approach means that switching to Gonka is a one-line change (baseURL), not a code rewrite. Your type-safe tools, structured output, and React hooks remain unchanged. For an application with thousands of users, the difference is tens of thousands of dollars per month.

Gonka price: input ~$0.0005 per 1M tokens, output ×3. This is hundreds to thousands of times cheaper than direct OpenAI and Anthropic rates.

The main feature of TanStack AI is the unified toolDefinition() contract: the tool is described once (input/output via Zod, ArkType, Valibot, or JSON Schema), and the implementation is bound on the server or client. Qwen3-235B, Kimi K2.6, and MiniMax-M2.7 support native tool calling through Gonka, so agents work reliably — without parsing text responses.

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 actual API call
})

const stream = chat({
  adapter: gonka('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
  messages: [{ role: 'user', content: 'What's the weather like in Moscow?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Which model to choose:

• Qwen/Qwen3-235B-A22B-Instruct-2507-FP8 — default. The largest response ceiling (8192) and strong tool calling. Suitable for agents and structured output.
• moonshotai/Kimi-K2.6 — excellent for long dialogues and reasoning. Response ceiling 3072.
• MiniMaxAI/MiniMax-M2.7 — balance of speed and quality, ceiling 4096.

Thanks to runtime adapter switching in TanStack AI, you can keep all three models in one provider and switch between them on the fly — for example, heavy agent tasks on Qwen, fast responses on MiniMax.