TanStack AI + Gonka — AI applications in TypeScript for pennies

Package installation (core + OpenAI-adapter, where openaiCompatible lives):

# 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 3M 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 baseURL, apiKey, and a list of models once, then pick 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: [
    'MiniMaxAI/MiniMax-M2.7', // default
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // reasoning model
  ],
})

Streaming chat on the server (for example, a route handler in any fullstack framework or TanStack Start). We 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('MiniMaxAI/MiniMax-M2.7'),
    messages,
    modelOptions: { max_tokens: 8192 }, // Gateway output cap
  })

  return toServerSentEventsResponse(stream)
}

React client via the useChat hook — streams responses from the server into 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 identical for all options.

Model parameters via the Gateway: the context is 180K tokens for MiniMax M2.7, 380K for DeepSeek V4 Flash, and 390K for GLM-5.3 Flash. The max_tokens ceiling is 8192 for MiniMax M2.7 and GLM-5.3 Flash, 32768 for DeepSeek V4 Flash. 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 through direct OpenAI/Anthropic rates or via Gonka—only the baseURL changes. But the cost differs by orders of magnitude. Let’s compare typical production loads for a TanStack AI application:

TanStack AI’s provider-agnostic approach means switching to Gonka is just a one-line change (baseURL), not a code rewrite. Meanwhile, 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 pricing: input ~$0.0062 per 1M tokens, output ×3. This is hundreds to thousands of times cheaper than the direct rates of OpenAI and Anthropic.

The main feature of TanStack AI is a single contract, toolDefinition(): you describe a tool once (input/output via Zod, ArkType, Valibot, or JSON Schema), and the implementation is bound on the server or the client. MiniMax M2.7, DeepSeek V4 Flash, and GLM-5.3 Flash support native tool calling through Gonka, so agents run reliably — no parsing of text responses required.

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

Which model to pick:

• MiniMaxAI/MiniMax-M2.7 — the default: a balance of speed and quality, with a long context. Response ceiling: 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — one of the longest contexts on the network (380K), cheap for large prompts. Response ceiling: 32768.
• zai-org/GLM-5.3-Flash — a reasoning model: it thinks before answering and excels at complex logic; the longest context on the network (390K). Response ceiling: 8192; reasoning consumes part of max_tokens.

Thanks to runtime adapter switching in TanStack AI, you can keep all three models under one provider and switch between them on the fly — for example, reasoning tasks on GLM-5.3 Flash and quick answers on MiniMax.