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 der benutzerdefinierte OpenAI-kompatible Provider mit der Funktion openaiCompatible() konfiguriert: Sie definieren einmalig baseURL, apiKey und die Modellliste und wählen dann bei jedem Aufruf ein Modell aus. Unser Gateway verwendet das Chat Completions-Format, daher belassen wir api: 'chat-completions' (dies ist der Standardwert).

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

// Gonka Provider – einmalige Konfiguration
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-dein-schlüssel
  api: 'chat-completions',
  models: [
    'MiniMaxAI/MiniMax-M2.7', // Standard
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // Reasoning-Modell
  ],
})

Streaming-Chat auf dem Server (z. B. ein Route-Handler in jedem Fullstack-Framework oder TanStack Start). Die Antwortlänge wird über modelOptions festgelegt – dies ist der einzige Punkt 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 }, // Ausgabe-Limit über Gateway
  })

  return toServerSentEventsResponse(stream)
}

React-Client über den useChat Hook – streamt Server-Antworten 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('Was ist Gonka?')}>
        Fragen
      </button>
    </div>
  )
}

Ohne Server: Derselbe Provider 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: Der Kontext beträgt 200K Tokens bei MiniMax M2.7, 380K bei DeepSeek V4 Flash und 390K bei GLM-5.3 Flash. Das max_tokens-Limit liegt bei 8192 für MiniMax M2.7 und GLM-5.3 Flash, sowie 32768 für DeepSeek V4 Flash. Wenn max_tokens nicht angegeben ist, liegt der Standardwert für Non-Stream-Anfragen bei 1500; für längere Antworten sollten Sie diesen Wert daher explizit angeben.

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.0069 pro 1M Token, Output ×3. Das ist hunderte bis tausende Male günstiger als die direkten Tarife von OpenAI und Anthropic.

Das Hauptmerkmal von TanStack AI ist ein einheitlicher toolDefinition()-Vertrag: Ein Tool wird einmal beschrieben (Input/Output über Zod, ArkType, Valibot oder JSON Schema), und die Implementierung wird auf dem Server oder Client verknüpft. MiniMax M2.7, DeepSeek V4 Flash und GLM-5.3 Flash unterstützen natives Tool Calling über Gonka, wodurch Agenten zuverlässig arbeiten — ohne das Parsen von Textantworten.

import { chat, toolDefinition } from '@tanstack/ai'
import { gonka } from './gonka'
import { z } from 'zod'

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Das Wetter in einer Stadt abrufen',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // Ihr tatsächlicher API-Aufruf
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'Wie ist das Wetter in Moskau?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Welches Modell wählen:

• MiniMaxAI/MiniMax-M2.7 — Standard, Balance 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; Reasoning verbraucht einen Teil der max_tokens.

Dank des Runtime Adapter Switchings in TanStack AI können Sie alle drei Modelle in einem Provider halten und während der Laufzeit zwischen ihnen wechseln — zum Beispiel Aufgaben mit Reasoning auf GLM-5.3 Flash, schnelle Antworten auf MiniMax.