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

Cài đặt gói (phần cốt lõi + bộ điều hợp OpenAI, 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à hook:

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

API-key JoinGonka: nếu chưa có, hãy đăng ký tại gate.joingonka.ai/register, nhận 10 triệu 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 đặ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 giữ api: 'chat-completions' (đây là giá trị mặc định).

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

// Nhà cung cấp Gonka — được 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-khóa-của-bạn
  api: 'chat-completions',
  models: [
    'Qwen/Qwen3-235B-A22B-Instruct-2507-FP8', // mặc định
    'moonshotai/Kimi-K2.6',
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Trò chuyện trực tuyến trên máy chủ (ví dụ: trình xử lý tuyến đường trong bất kỳ framework fullstack nào hoặc TanStack Start). Chúng tôi đặt độ dài phản hồi thông qua modelOptions — đây là điểm duy nhất cho các tham số dây 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('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
    messages,
    modelOptions: { max_tokens: 8192 }, // giới hạn Qwen qua Gateway
  })

  return toServerSentEventsResponse(stream)
}

React client thông qua hook useChat — truyền phản hồi từ máy chủ tới 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ó máy chủ: cùng một nhà cung cấp hoạt động trực tiếp trong một tập lệnh hoặc backend — gọi chat() và đọc luồng. Kết nối với Gonka là như nhau cho tất cả các biến thể.

Các tham số mô hình thông qua Gateway: ngữ cảnh của cả ba mô hình là 128K token. Giới hạn max_tokens: Qwen3-235B — 8192, Kimi K2.6 — 3072, MiniMax-M2.7 — 4096. Nếu max_tokens không được chỉ định, mặc định cho non-stream là 1500, do đó đối với các phản hồi dài, hãy chỉ định nó rõ ràng.

TanStack AI hoạt động tốt với cả mức giá trực tiếp của OpenAI/Anthropic và thông qua Gonka — chỉ có baseURL thay đổi. Nhưng giá cả khác nhau theo cấp số nhân. Hãy so sánh các tải ứng dụng sản xuất điển hình trên TanStack AI:

Cách tiếp cận độc lập nhà cung cấp của TanStack AI có nghĩa là việc chuyển sang Gonka chỉ là thay đổi một dòng (baseURL), chứ không phải viết lại mã. Các công cụ an toàn kiểu, đầu ra có cấu trúc và React hook của bạn vẫn không thay đổi. Đối với một ứng dụng có hàng nghìn người dùng, sự khác biệt là hàng chục nghìn đô la mỗi tháng.

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

Tính năng chính của TanStack AI là hợp đồng toolDefinition() thống nhất: công cụ được mô tả một lần (đầu vào/đầu ra qua Zod, ArkType, Valibot hoặc JSON Schema), và việc triển khai được ràng buộc trên máy chủ hoặc máy khách. Qwen3-235B, Kimi K2.6 và MiniMax-M2.7 hỗ trợ tool calling gốc 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: 'Nhận thời tiết tại một thành phố',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // cuộc gọi API thực tế của bạn
})

const stream = chat({
  adapter: gonka('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
  messages: [{ role: 'user', content: 'Thời tiết ở Moscow thế nào?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

Nên chọn mô hình nào:

• Qwen/Qwen3-235B-A22B-Instruct-2507-FP8 — mặc định. Trần phản hồi lớn nhất (8192) và tool calling mạnh mẽ. Phù hợp cho tác nhân và đầu ra có cấu trúc.
• moonshotai/Kimi-K2.6 — tuyệt vời cho các cuộc đối thoại dài và suy luận. Trần phản hồi 3072.
• MiniMaxAI/MiniMax-M2.7 — cân bằng giữa tốc độ và chất lượng, trần 4096.

Nhờ chuyển đổi bộ điều hợp thời gian chạy 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 một cách linh hoạt — ví dụ, các tác vụ tác nhân nặng trên Qwen, phản hồi nhanh trên MiniMax.