TanStack AI + Gonka — AI-додатки на TypeScript за копійки

Встановлення пакетів (ядро + OpenAI-адаптер, в якому живе openaiCompatible):

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

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

Для чат-інтерфейсу на React додайте клієнт і хуки:

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

API-ключ JoinGonka: якщо ще немає — зареєструйтеся на gate.joingonka.ai/register, отримайте 3M безкоштовних токенів і створіть ключ jg-xxx у Dashboard → API Keys. Один ключ і один баланс працюють і для OpenAI-, і для Anthropic-формату.

У TanStack AI кастомний OpenAI-сумісний провайдер налаштовується функцією openaiCompatible(): один раз задаєте baseURL, apiKey і список моделей, а потім вибираєте модель на кожен виклик. Наш Gateway говорить форматом Chat Completions, тому залишаємо api: 'chat-completions' (це значення за замовчуванням).

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

Streaming-чат на сервері (наприклад, route-хендлер у будь-якому fullstack-фреймворку або TanStack Start). Довжину відповіді задаємо через modelOptions — це єдина точка для нативних wire-параметрів (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)
}

React-клієнт через хук useChat — стрімить відповіді з сервера в 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>
  )
}

Без сервера: той самий провайдер працює у скрипті або бекенді напряму — викликайте chat() і читайте потік. Підключення до Gonka однакове для всіх варіантів.

Параметри моделей через Gateway: контекст — 180K токенів у MiniMax M2.7, 380K у DeepSeek V4 Flash і 390K у GLM-5.3 Flash. Стеля max_tokens — 8192 у MiniMax M2.7 і GLM-5.3 Flash, 32768 у DeepSeek V4 Flash. Якщо max_tokens не вказано, дефолт для non-stream — 1500, тому для довгих відповідей задавайте його явно.

TanStack AI однаково зручно працює і через прямі тарифи OpenAI/Anthropic, і через Gonka — змінюється тільки baseURL. Але ціна відрізняється на порядки. Порівняємо типові навантаження production-додатку на TanStack AI:

Provider-agnostic підхід TanStack AI означає, що перемкнутися на Gonka — це правка одного рядка (baseURL), а не переписування коду. При цьому ваші типобезпечні tools, структурований вивід та React-хуки залишаються без змін. Для додатку з тисячами користувачів різниця — десятки тисяч доларів на місяць.

Ціна Gonka: вхід ~$0.0062 за 1M токенів, вихід ×3. Це в сотні–тисячі разів дешевше за прямі тарифи OpenAI та Anthropic.

Головна фішка TanStack AI — єдиний контракт toolDefinition(): інструмент описується один раз (вхід/вихід через Zod, ArkType, Valibot або JSON Schema), а реалізація прив'язується на сервері чи клієнті. MiniMax M2.7, DeepSeek V4 Flash і GLM-5.3 Flash підтримують нативний tool calling через Gonka, тому агенти працюють надійно — без парсингу текстових відповідей.

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

Яку модель обрати:

• MiniMaxAI/MiniMax-M2.7 — дефолт, баланс швидкості та якості, довгий контекст. Стеля відповіді 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — один із найдовших контекстів мережі (380K), дешеві великі промпти. Стеля відповіді 32768.
• zai-org/GLM-5.3-Flash — reasoning-модель: міркує перед відповіддю, сильна у складній логіці; найдовший контекст мережі (390K). Стеля відповіді 8192; міркування витрачають частину max_tokens.

Завдяки runtime adapter switching у TanStack AI можна тримати всі три моделі в одному провайдері та перемикатися між ними на льоту — наприклад, задачі з міркуваннями на GLM-5.3 Flash, швидкі відповіді на MiniMax.