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: [
    'Qwen/Qwen3-235B-A22B-Instruct-2507-FP8', // дефолт
    '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('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
    messages,
    modelOptions: { max_tokens: 8192 }, // стеля Qwen через 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: контекст у всіх трьох моделей — 128K токенів. Стеля max_tokens: Qwen3-235B — 8192, Kimi K2.6 — 3072, MiniMax-M2.7 — 4096. Якщо max_tokens не вказаний, дефолт для non-stream — 1500, тому для довгих відповідей задавайте його явно.

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

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

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

Головна фішка TanStack AI — єдиний контракт toolDefinition(): інструмент описується один раз (вхід/вихід через Zod, ArkType, Valibot або JSON Schema), а реалізація прив'язується на сервері або клієнті. Qwen3-235B, 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('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
  messages: [{ role: 'user', content: 'Какая погода в Москве?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

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

• Qwen/Qwen3-235B-A22B-Instruct-2507-FP8 — дефолт. Найбільший поріг відповіді (8192) і сильний tool calling. Підходить для агентів і структурованого виводу.
• moonshotai/Kimi-K2.6 — відмінний для довгих діалогів і міркувань. Поріг відповіді 3072.
• MiniMaxAI/MiniMax-M2.7 — баланс швидкості та якості, поріг 4096.

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