TanStack AI + Gonka — Applications IA en TypeScript pour une bouchée de pain

Installation des packages (core + adaptateur OpenAI, où vit openaiCompatible) :

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

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

Pour une interface de chat sur React, ajoutez le client et les hooks :

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

Clé API JoinGonka : si vous ne l'avez pas encore — inscrivez-vous sur gate.joingonka.ai/register, obtenez 3M jetons gratuits et créez une clé jg-xxx dans le Dashboard → API Keys. Une seule clé et un seul solde fonctionnent pour les formats OpenAI et Anthropic.

Dans TanStack AI, un provider personnalisé compatible OpenAI se configure avec la fonction openaiCompatible() : vous définissez une fois le baseURL, l'apiKey et la liste des modèles, puis vous choisissez un modèle à chaque appel. Notre Gateway parle le format Chat Completions, on laisse donc api: 'chat-completions' (valeur par défaut).

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

Chat en streaming côté serveur (par exemple un route handler dans n'importe quel framework fullstack ou TanStack Start). La longueur de la réponse se règle via modelOptions — c'est le seul point pour les paramètres wire natifs (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)
}

Client React via le hook useChat — il streame les réponses du serveur vers l'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>
  )
}

Sans serveur : le même provider fonctionne directement dans un script ou un backend — appelez chat() et lisez le flux. La connexion à Gonka est identique dans tous les cas.

Paramètres des modèles via Gateway : le contexte est de 180K tokens pour MiniMax M2.7, 380K pour DeepSeek V4 Flash et 390K pour GLM-5.3 Flash. Le plafond max_tokens est de 8192 pour MiniMax M2.7 et GLM-5.3 Flash, 32768 pour DeepSeek V4 Flash. Si max_tokens n'est pas indiqué, la valeur par défaut en non-stream est 1500, donc pour les réponses longues, précisez-le explicitement.

TanStack AI fonctionne aussi facilement via les tarifs directs OpenAI/Anthropic que via Gonka — seul le baseURL change. Mais le prix diffère de plusieurs ordres de grandeur. Comparons les charges typiques d'une application de production sous TanStack AI :

L'approche agnostique aux fournisseurs de TanStack AI signifie que passer à Gonka ne nécessite qu'une seule ligne (baseURL), pas une réécriture du code. Vos outils typés, votre sortie structurée et vos hooks React restent inchangés. Pour une application avec des milliers d'utilisateurs, la différence représente des dizaines de milliers de dollars par mois.

Prix Gonka : entrée ~$0.0062 pour 1M de jetons, sortie ×3. C'est des centaines à des milliers de fois moins cher que les tarifs directs d'OpenAI et d'Anthropic.

Le principal atout de TanStack AI, c'est le contrat unique toolDefinition() : un outil se décrit une seule fois (entrée/sortie via Zod, ArkType, Valibot ou JSON Schema), et son implémentation se rattache côté serveur ou côté client. MiniMax M2.7, DeepSeek V4 Flash et GLM-5.3 Flash prennent en charge le tool calling natif via Gonka, ce qui rend les agents fiables — sans parsing de réponses textuelles.

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

Quel modèle choisir :

• MiniMaxAI/MiniMax-M2.7 — le choix par défaut, un équilibre entre vitesse et qualité, avec un long contexte. Plafond de réponse : 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — l'un des contextes les plus longs du réseau (380K), idéal pour les gros prompts à moindre coût. Plafond de réponse : 32768.
• zai-org/GLM-5.3-Flash — un modèle de raisonnement : il réfléchit avant de répondre et excelle en logique complexe ; c'est le plus long contexte du réseau (390K). Plafond de réponse : 8192 ; le raisonnement consomme une partie des max_tokens.

Grâce au runtime adapter switching de TanStack AI, vous pouvez garder les trois modèles chez un même fournisseur et basculer de l'un à l'autre à la volée — par exemple, les tâches de raisonnement sur GLM-5.3 Flash et les réponses rapides sur MiniMax.