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 using the openaiCompatible() function: you define the baseURL, apiKey, and a list of models once, and then select a model for each call. Our Gateway speaks the Chat Completions format, so we keep 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: [
    'moonshotai/Kimi-K2.6', // default
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Streaming chat on the server (e.g., a route handler in any fullstack framework or TanStack Start). We set the response length via modelOptions — this is the single point 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 }, // output limit 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 in a script or backend directly — just call chat() and read the stream. Connecting to Gonka is the same for all variants.

Model parameters via Gateway: the context window for both models is 200K tokens. The max_tokens limit is 8192 for all network models. If max_tokens is not specified, the default for non-stream is 1500, so specify it explicitly for long responses.

TanStack AI works equally well with direct OpenAI/Anthropic rates and via Gonka — only the baseURL changes. But the price difference is orders of magnitude. Let's compare typical production TanStack AI workloads:

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

Gonka Price: input ~$0.003 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 a unified toolDefinition() contract: a tool is described once (input/output via Zod, ArkType, Valibot, or JSON Schema), and the implementation is bound on the server or client. Kimi K2.6 and MiniMax-M2.7 support native tool calling via 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 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 choose:

• moonshotai/Kimi-K2.6 — strong in coding, reasoning, and agent scenarios. Response limit is 8192.
• MiniMaxAI/MiniMax-M2.7 — default, balance of speed and quality, long context. Response limit is 8192.

Thanks to runtime adapter switching in TanStack AI, you can keep both models in one provider and switch between them on the fly — e.g., heavy agent tasks on Kimi, quick responses on MiniMax.