TanStack AI + Gonka — Ứng dụng AI trên TypeScript giá rẻ

Cài đặt gói (core + OpenAI-adapter, nơi chứa openaiCompatible):

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

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

Đối với giao diện trò chuyện trên React, hãy thêm client và hooks:

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

API-khóa JoinGonka: nếu chưa có — hãy đăng ký tại gate.joingonka.ai/register, nhận 3M token miễn phí và tạo khóa jg-xxx trong Dashboard → API Keys. Một khóa và một số dư hoạt động cho cả định dạng OpenAI và Anthropic.

Trong TanStack AI, nhà cung cấp tương thích OpenAI tùy chỉnh được cấu hình bằng hàm openaiCompatible(): bạn thiết lập baseURL, apiKey và danh sách model một lần, sau đó chọn model cho từng lần gọi. Gateway của chúng tôi nói định dạng Chat Completions, nên ta giữ api: 'chat-completions' (đây là giá trị mặc định).

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

Chat streaming trên server (ví dụ route handler trong bất kỳ framework fullstack nào hoặc TanStack Start). Độ dài phản hồi được đặt qua modelOptions — đây là điểm duy nhất cho các tham số wire gốc (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)
}

Client React qua hook useChat — stream phản hồi từ server lên 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>
  )
}

Không cần server: cùng nhà cung cấp đó hoạt động trực tiếp trong script hoặc backend — gọi chat() và đọc luồng. Kết nối tới Gonka giống nhau cho mọi phương án.

Tham số model qua Gateway: ngữ cảnh — 180K token với MiniMax M2.7, 380K với DeepSeek V4 Flash và 390K với GLM-5.3 Flash. Giới hạn max_tokens — 8192 với MiniMax M2.7 và GLM-5.3 Flash, 32768 với DeepSeek V4 Flash. Nếu không chỉ định max_tokens, mặc định cho non-stream là 1500, nên với phản hồi dài hãy đặt nó rõ ràng.

TanStack AI hoạt động thuận tiện như nhau thông qua giá trực tiếp của OpenAI/Anthropic và thông qua Gonka — chỉ cần thay đổi baseURL. Nhưng giá cả khác biệt hoàn toàn. Hãy so sánh tải thực tế của ứng dụng sản xuất trên TanStack AI:

Phương pháp Provider-agnostic của TanStack AI có nghĩa là việc chuyển sang Gonka chỉ là thay đổi một dòng (baseURL), không cần viết lại mã. Đồng thời, các tool an toàn kiểu, đầu ra có cấu trúc và React-hook của bạn vẫn được giữ nguyên. Đối với một ứng dụng với hàng ngàn người dùng, sự khác biệt là hàng chục ngàn đô la mỗi tháng.

Giá của Gonka: đầu vào ~$0.0062 cho 1M token, đầu ra ×3. Điều này rẻ hơn hàng trăm đến hàng nghìn lần so với giá trực tiếp của OpenAI và Anthropic.

Điểm đặc biệt nhất của TanStack AI là hợp đồng thống nhất toolDefinition(): công cụ được mô tả một lần (đầu vào/đầu ra qua Zod, ArkType, Valibot hoặc JSON Schema), còn phần triển khai được gắn kết trên server hoặc client. MiniMax M2.7, DeepSeek V4 Flash và GLM-5.3 Flash hỗ trợ native tool calling qua Gonka, nhờ đó các agent hoạt động đáng tin cậy — không cần phân tích cú pháp câu trả lời dạng văn bản.

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

Nên chọn model nào:

• MiniMaxAI/MiniMax-M2.7 — mặc định, cân bằng giữa tốc độ và chất lượng, ngữ cảnh dài. Giới hạn phản hồi 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — một trong những ngữ cảnh dài nhất của mạng lưới (380K), prompt lớn giá rẻ. Giới hạn phản hồi 32768.
• zai-org/GLM-5.3-Flash — model reasoning: suy luận trước khi trả lời, mạnh về logic phức tạp; ngữ cảnh dài nhất của mạng lưới (390K). Giới hạn phản hồi 8192; phần suy luận tiêu tốn một phần max_tokens.

Nhờ runtime adapter switching trong TanStack AI, bạn có thể giữ cả ba model trong cùng một provider và chuyển đổi giữa chúng tức thì — ví dụ, các tác vụ suy luận dùng GLM-5.3 Flash, phản hồi nhanh dùng MiniMax.