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

Installation des paquets (noyau + adaptateur OpenAI, où vit openaiCompatible) :

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

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

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

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

Clé API JoinGonka : si vous n'en avez pas encore — inscrivez-vous sur gate.joingonka.ai/register, obtenez 10 millions de jetons gratuits et créez une clé jg-xxx dans le tableau de bord → Clés API. Une seule clé et un seul solde fonctionnent pour les formats OpenAI et Anthropic.

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

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

// Le fournisseur Gonka — configuré une seule fois
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-votre-clé
  api: 'chat-completions',
  models: [
    'moonshotai/Kimi-K2.6', // défaut
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Chat en streaming côté serveur (par exemple, un gestionnaire de route dans n'importe quel framework fullstack ou TanStack Start). On définit la longueur de la réponse 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 }, // plafond de sortie via Gateway
  })

  return toServerSentEventsResponse(stream)
}

Client React via le hook useChat — 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('Qu'est-ce que Gonka?')}>
        Demander
      </button>
    </div>
  )
}

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

Paramètres des modèles via Gateway : le contexte des deux modèles est de 200K jetons. Le plafond max_tokens est de 8192 pour tous les modèles du réseau. Si max_tokens n'est pas précisé, la valeur par défaut pour le non-stream est de 1500, donc pour les réponses longues, définissez-le explicitement.

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

L'approche provider-agnostic de TanStack AI signifie que passer à Gonka ne nécessite que la modification d'une ligne (baseURL), sans réécriture de code. En même temps, 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.003 pour 1M de jetons, sortie ×3. C'est des centaines à des milliers de fois moins cher que les tarifs directs d'OpenAI et Anthropic.

La fonctionnalité principale de TanStack AI est le contrat unique toolDefinition() : l'outil est décrit une fois (entrée/sortie via Zod, ArkType, Valibot ou JSON Schema), et l'implémentation est liée côté serveur ou client. Kimi K2.6 et MiniMax-M2.7 prennent en charge le tool calling natif via Gonka, les agents fonctionnent donc de manière fiable — sans analyse de réponses textuelles.

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

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Obtenir la météo dans une ville',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // votre appel API réel
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'Quelle est la météo à Moscou?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Quel modèle choisir :

• moonshotai/Kimi-K2.6 — puissant pour le codage, le raisonnement et les scénarios avec agents. Plafond de réponse 8192.
• MiniMaxAI/MiniMax-M2.7 — défaut, équilibre entre vitesse et qualité, contexte long. Plafond de réponse 8192.

Grâce au runtime adapter switching dans TanStack AI, vous pouvez conserver les deux modèles dans le même fournisseur et basculer entre eux à la volée — par exemple, tâches d'agent intensives sur Kimi, réponses rapides sur MiniMax.