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, một provider tùy chỉnh tương thích với OpenAI được cấu hình bằng hàm openaiCompatible(): bạn đặt baseURL, apiKey và danh sách mô hình một lần, sau đó chọn mô hình cho mỗi lần gọi. Gateway của chúng tôi sử dụng định dạng Chat Completions, vì vậy chúng tôi để api: 'chat-completions' (đây là giá trị mặc định).

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

// Provider Gonka — cấu hình một lần
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', // mặc định
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // mô hình reasoning
  ],
})

Streaming-chat trên server (ví dụ: route-handler trong bất kỳ fullstack framework nào hoặc TanStack Start). Độ dài câu trả lời được đặt qua modelOptions — đây là nơi 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 }, // giới hạn output qua Gateway
  })

  return toServerSentEventsResponse(stream)
}

React-client qua hook useChat — stream phản hồi từ server ra 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 là gì?')}>
        Hỏi
      </button>
    </div>
  )
}

Không cần server: cùng một provider đó hoạt động trong script hoặc backend trực tiếp — gọi chat() và đọc luồng. Việc kết nối tới Gonka là như nhau cho tất cả các trường hợp.

Thông số mô hình qua Gateway: context — 200K token cho MiniMax M2.7, 380K cho DeepSeek V4 Flash và 390K cho GLM-5.3 Flash. Giới hạn max_tokens — 8192 cho MiniMax M2.7 và GLM-5.3 Flash, 32768 cho DeepSeek V4 Flash. Nếu max_tokens không được chỉ định, mặc định cho non-stream là 1500, vì vậy đối với các câu trả lời dài, hãy đặt nó một cách 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.0069 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.

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

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

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Tìm hiểu thời tiết tại thành phố',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // lệnh gọi API thực tế của bạn
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'Thời tiết ở Moscow thế nào?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Cách chọn mô hình:

• MiniMaxAI/MiniMax-M2.7 — mặc định, cân bằng giữa tốc độ và chất lượng, bối cảnh dài. Giới hạn phản hồi 8192.
• deepseek-ai/DeepSeek-V4-Flash-0731 — một trong những bối cảnh dài nhất 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 — mô hình reasoning: suy luận trước khi trả lời, mạnh về logic phức tạp; bối cảnh dài nhất mạng lưới (390K). Giới hạn phản hồi 8192; các suy luận tiêu tốn một phần max_tokens.

Nhờ tính năng runtime adapter switching trong TanStack AI, bạn có thể giữ cả ba mô hình trong một nhà cung cấp và chuyển đổi giữa chúng ngay lập tức — ví dụ: các tác vụ cần suy luận trên GLM-5.3 Flash, phản hồi nhanh trên MiniMax.