TanStack AI + Gonka — Aplicaciones de IA en TypeScript por centavos

Instalación de paquetes (núcleo + adaptador de OpenAI, donde reside openaiCompatible):

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

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

Para una interfaz de chat en React, agregue el cliente y los hooks:

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

API-key de JoinGonka: si aún no la tiene — regístrese en gate.joingonka.ai/register, obtenga 3M de tokens gratuitos y cree una clave jg-xxx en Dashboard → API Keys. Una clave y un balance funcionan tanto para el formato de OpenAI como para el de Anthropic.

En TanStack AI, un proveedor personalizado compatible con OpenAI se configura con la función openaiCompatible(): defines el baseURL, el apiKey y la lista de modelos una vez, y luego seleccionas el modelo en cada llamada. Nuestro Gateway habla el formato de Chat Completions, por lo que mantenemos api: 'chat-completions' (es el valor predeterminado).

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

// Proveedor Gonka — configurado una vez
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-tu-clave
  api: 'chat-completions',
  models: [
    'MiniMaxAI/MiniMax-M2.7', // predeterminado
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // modelo de razonamiento
  ],
})

Chat con streaming en el servidor (por ejemplo, un route handler en cualquier framework fullstack o TanStack Start). La longitud de la respuesta se define a través de modelOptions — este es el punto único para parámetros de wire nativos (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 }, // límite de salida a través del Gateway
  })

  return toServerSentEventsResponse(stream)
}

Cliente React a través del hook useChat — transmite respuestas desde el servidor a la 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é es Gonka?')}>
        Preguntar
      </button>
    </div>
  )
}

Sin servidor: el mismo proveedor funciona directamente en un script o backend — invoca chat() y lee el flujo. La conexión con Gonka es igual para todas las variantes.

Parámetros de los modelos a través del Gateway: el contexto es de 200K tokens para MiniMax M2.7, 380K para DeepSeek V4 Flash y 390K para GLM-5.3 Flash. El límite max_tokens es de 8192 para MiniMax M2.7 y GLM-5.3 Flash, y 32768 para DeepSeek V4 Flash. Si no se especifica max_tokens, el valor predeterminado para non-stream es 1500, así que para respuestas largas, defínelo explícitamente.

TanStack AI funciona igual de bien a través de las tarifas directas de OpenAI/Anthropic como a través de Gonka — solo cambia el baseURL. Pero el precio difiere en órdenes de magnitud. Comparemos las cargas típicas de una aplicación de producción en TanStack AI:

El enfoque provider-agnostic de TanStack AI significa que cambiar a Gonka es editar una línea (baseURL), no reescribir el código. Al mismo tiempo, tus herramientas con seguridad de tipos, salida estructurada y hooks de React permanecen sin cambios. Para una aplicación con miles de usuarios, la diferencia es de decenas de miles de dólares al mes.

Precio de Gonka: entrada ~$0.0069 por 1M de tokens, salida ×3. Esto es cientos o miles de veces más barato que las tarifas directas de OpenAI y Anthropic.

La principal ventaja de TanStack AI es un contrato unificado toolDefinition(): la herramienta se describe una vez (entrada/salida a través de Zod, ArkType, Valibot o JSON Schema) y la implementación se vincula en el servidor o cliente. MiniMax M2.7, DeepSeek V4 Flash y GLM-5.3 Flash soportan tool calling nativo a través de Gonka, por lo que los agentes funcionan de manera fiable, sin necesidad de parsear respuestas de texto.

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

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Obtener el clima en una ciudad',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // su llamada real a la API
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: '¿Qué clima hace en Moscú?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Qué modelo elegir:

• MiniMaxAI/MiniMax-M2.7 — predeterminado, equilibrio entre velocidad y calidad, contexto largo. Límite de respuesta 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — uno de los contextos más largos de la red (380K), prompts grandes económicos. Límite de respuesta 32768.
• zai-org/GLM-5.3-Flash — modelo de razonamiento: razona antes de responder, es fuerte en lógica compleja; el contexto más largo de la red (390K). Límite de respuesta 8192; el razonamiento consume parte de max_tokens.

Gracias al runtime adapter switching en TanStack AI, puede mantener los tres modelos en un solo proveedor y cambiar entre ellos sobre la marcha; por ejemplo, tareas de razonamiento en GLM-5.3 Flash, respuestas rápidas en MiniMax.