TanStack AI + Gonka – KI-Anwendungen mit TypeScript für kleines Geld

Installation der Pakete (Kern + OpenAI-Adapter, in dem openaiCompatible lebt):

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

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

Für ein Chat-Interface in React fügen Sie den Client und die Hooks hinzu:

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

JoinGonka API-Schlüssel: Falls Sie noch keinen haben — registrieren Sie sich auf gate.joingonka.ai/register, erhalten Sie 3M kostenlose Token und erstellen Sie einen Schlüssel jg-xxx unter Dashboard → API Keys. Ein Schlüssel und ein Guthaben funktionieren sowohl für das OpenAI- als auch für das Anthropic-Format.

In TanStack AI wird ein benutzerdefinierter OpenAI-kompatibler Anbieter mit der Funktion openaiCompatible() konfiguriert: Sie legen einmal baseURL, apiKey und die Modellliste fest und wählen dann das Modell für jeden Aufruf aus. Unser Gateway spricht das Chat-Completions-Format, daher belassen wir api: 'chat-completions' (der Standardwert).

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 auf dem Server (z. B. ein Route-Handler in jedem Fullstack-Framework oder TanStack Start). Die Antwortlänge legen wir über modelOptions fest — dies ist die einzige Stelle für native Wire-Parameter (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 über den Hook useChat — streamt Antworten vom Server in die 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>
  )
}

Ohne Server: Derselbe Anbieter funktioniert direkt in einem Skript oder Backend — rufen Sie chat() auf und lesen Sie den Stream. Die Verbindung zu Gonka ist für alle Varianten gleich.

Modellparameter über das Gateway: Kontext — 180K Token bei MiniMax M2.7, 380K bei DeepSeek V4 Flash und 390K bei GLM-5.3 Flash. Die Obergrenze für max_tokens — 8192 bei MiniMax M2.7 und GLM-5.3 Flash, 32768 bei DeepSeek V4 Flash. Wenn max_tokens nicht angegeben ist, beträgt der Standard für Non-Stream 1500, daher sollten Sie ihn für lange Antworten explizit festlegen.

TanStack AI funktioniert gleichermaßen komfortabel über die direkten Tarife von OpenAI/Anthropic als auch über Gonka — es ändert sich nur die baseURL. Aber der Preis unterscheidet sich um Größenordnungen. Vergleichen wir typische Produktionslasten einer Anwendung auf TanStack AI:

Der provider-agnostische Ansatz von TanStack AI bedeutet, dass der Wechsel zu Gonka nur eine Zeile (baseURL) ändert, ohne Code neu schreiben zu müssen. Dabei bleiben Ihre typsicheren Tools, die strukturierte Ausgabe und die React-Hooks unverändert. Für eine Anwendung mit Tausenden von Benutzern ist der Unterschied zehntausende Dollar pro Monat.

Preis von Gonka: Input ~$0.0062 pro 1M Token, Output ×3. Das ist hunderte bis tausende Male günstiger als die direkten Tarife von OpenAI und Anthropic.

Das Herzstück von TanStack AI ist der einheitliche Vertrag toolDefinition(): Ein Tool wird einmal beschrieben (Input/Output über Zod, ArkType, Valibot oder JSON Schema), und die Implementierung wird serverseitig oder clientseitig angebunden. MiniMax M2.7, DeepSeek V4 Flash und GLM-5.3 Flash unterstützen natives Tool Calling über Gonka, sodass Agenten zuverlässig arbeiten – ganz ohne Parsing von Textantworten.

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

Welches Modell wählen:

• MiniMaxAI/MiniMax-M2.7 – Standard, ausgewogene Mischung aus Geschwindigkeit und Qualität, langer Kontext. Antwortlimit 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 – einer der längsten Kontexte im Netzwerk (380K), günstige große Prompts. Antwortlimit 32768.
• zai-org/GLM-5.3-Flash – Reasoning-Modell: denkt vor der Antwort nach, stark bei komplexer Logik; längster Kontext im Netzwerk (390K). Antwortlimit 8192; die Denkprozesse verbrauchen einen Teil der max_tokens.

Dank Runtime Adapter Switching in TanStack AI lassen sich alle drei Modelle bei einem Anbieter halten und im laufenden Betrieb umschalten – etwa Reasoning-Aufgaben an GLM-5.3 Flash, schnelle Antworten an MiniMax.