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, отримайте 10M безкоштовних токенів та створіть ключ 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 — налаштовується один раз
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-ваш-ключ
  api: 'chat-completions',
  models: [
    'moonshotai/Kimi-K2.6', // дефолт
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

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

  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('Що таке Gonka?')}>
        Запитати
      </button>
    </div>
  )
}

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

Параметри моделей через Gateway: контекст у обох моделей — 200K токенів. Стеля max_tokens — 8192 для всіх моделей мережі. Якщо max_tokens не вказано, дефолт для non-stream — 1500, тому для довгих відповідей задавайте його явно.

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

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

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

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

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

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Дізнатися погоду в місті',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // ваш реальний виклик API
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'Яка погода в Києві?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

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

• moonshotai/Kimi-K2.6 — сильна в кодингу, міркуваннях та агентних сценаріях. Стеля відповіді 8192.
• MiniMaxAI/MiniMax-M2.7 — дефолт, баланс швидкості та якості, довгий контекст. Стеля відповіді 8192.

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