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

Pakete installieren (Kern + OpenAI-Adapter, in dem sich openaiCompatible befindet):

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

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

Für die Chat-Oberfläche in React fügen Sie den Client und Hooks hinzu:

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

JoinGonka API-Schlüssel: Falls noch nicht vorhanden – registrieren Sie sich unter gate.joingonka.ai/register, erhalten Sie 10 Mio. kostenlose Token und erstellen Sie einen Schlüssel jg-xxx im 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 Provider mit der Funktion openaiCompatible() konfiguriert: Sie legen einmal baseURL, apiKey und eine Liste von Modellen fest und wählen dann bei jedem Aufruf ein Modell aus. Unser Gateway verwendet das Chat Completions-Format, daher lassen wir api: 'chat-completions' stehen (dies ist der Standardwert).

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

// Gonka Provider — einmalig konfiguriert
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-ihr-key
  api: 'chat-completions',
  models: [
    'moonshotai/Kimi-K2.6', // Standard
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Streaming-Chat auf dem Server (z. B. ein Route-Handler in einem beliebigen Fullstack-Framework oder TanStack Start). Die Antwortlänge wird über modelOptions festgelegt — dies ist der zentrale 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 }, // Ausgabebegrenzung über Gateway
  })

  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('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 Anbindung an Gonka ist für alle Varianten identisch.

Modellparameter über Gateway: Der Kontext beider Modelle beträgt 200K Tokens. Das max_tokens-Limit liegt bei 8192 für alle Modelle im Netzwerk. Wenn max_tokens nicht angegeben ist, ist der Standard für Non-Stream 1500; für lange Antworten sollten Sie ihn daher explizit festlegen.

TanStack AI funktioniert gleichermaßen bequem über direkte OpenAI/Anthropic-Tarife wie auch über Gonka — nur die baseURL ändert sich. Aber der Preis unterscheidet sich um Größenordnungen. Vergleichen wir typische Lasten einer Produktionsanwendung auf TanStack AI:

Der provider-agnostische Ansatz von TanStack AI bedeutet, dass der Wechsel zu Gonka nur eine Zeile Code erfordert (baseURL), ohne den bestehenden Code umschreiben zu müssen. Dabei bleiben Ihre typensicheren Tools, strukturierter Output und React-Hooks unverändert. Für eine Anwendung mit Tausenden von Benutzern macht das einen Unterschied von Zehntausenden Dollar pro Monat.

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

Das Hauptfeature von TanStack AI ist der einheitliche 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 gebunden. Kimi K2.6 und MiniMax-M2.7 unterstützen natives Tool Calling über Gonka, daher arbeiten Agenten zuverlässig — ohne Textantworten parsen zu müssen.

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

const getWeather = toolDefinition({
  name: 'getWeather',
  description: '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:

• moonshotai/Kimi-K2.6 — stark bei Coding, logischem Denken und Agenten-Szenarien. Antwortlimit 8192.
• MiniMaxAI/MiniMax-M2.7 — Standard, Balance aus Geschwindigkeit und Qualität, langer Kontext. Antwortlimit 8192.

Dank des Runtime-Adapter-Switchings in TanStack AI können Sie beide Modelle in einem Provider halten und im laufenden Betrieb zwischen ihnen wechseln — zum Beispiel anspruchsvolle Agentenaufgaben auf Kimi, schnelle Antworten auf MiniMax.