TanStack AI + Gonka — แอปพลิเคชัน AI บน TypeScript ราคาถูก

การติดตั้งแพ็คเกจ (แกนหลัก + อะแดปเตอร์ OpenAI ซึ่ง openaiCompatible อยู่ในนั้น):

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

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

สำหรับอินเทอร์เฟซแชทบน React เพิ่มไคลเอ็นต์และ hooks:

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 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: [
    'Qwen/Qwen3-235B-A22B-Instruct-2507-FP8', // default
    'moonshotai/Kimi-K2.6',
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

Streaming-chat บนเซิร์ฟเวอร์ (เช่น route-handler ใน เฟรมเวิร์ก fullstack ใดๆ หรือ TanStack Start) เรากำหนดความยาวของคำตอบผ่าน modelOptions — นี่คือจุดเดียวสำหรับ wire-parameters แบบ native (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 ceiling through Gateway
  })

  return toServerSentEventsResponse(stream)
}

React-client ผ่าน hook 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 เท่านั้น แต่ราคาแตกต่างกันหลายเท่าตัว ลองเปรียบเทียบภาระงานทั่วไปของแอปพลิเคชันเวอร์ชันโปรดักชันบน TanStack AI:

แนวทาง Provider-agnostic ของ TanStack AI หมายความว่าการเปลี่ยนไปใช้ Gonka คือการแก้ไขบรรทัดเดียว (baseURL) ไม่ใช่การเขียนโค้ดใหม่ ในขณะเดียวกัน เครื่องมือที่ปลอดภัยทางประเภทของคุณ, ผลลัพธ์ที่มีโครงสร้าง และ React-hooks ยังคงไม่เปลี่ยนแปลง สำหรับแอปพลิเคชันที่มีผู้ใช้หลายพันคน ความแตกต่างคือหลายหมื่นดอลลาร์ต่อเดือน

ราคา Gonka: อินพุต ~$0.0005 ต่อ 1M โทเค็น, เอาต์พุต ×3 ซึ่งถูกกว่าอัตราโดยตรงของ OpenAI และ Anthropic หลายร้อยถึงหลายพันเท่า

คุณสมบัติหลักของ TanStack AI คือสัญญา toolDefinition() ที่เป็นหนึ่งเดียว: เครื่องมือจะถูกอธิบายเพียงครั้งเดียว (อินพุต/เอาต์พุตผ่าน Zod, ArkType, Valibot หรือ JSON Schema) และการใช้งานจะถูกผูกเข้ากับเซิร์ฟเวอร์หรือไคลเอนต์ Qwen3-235B, Kimi K2.6 และ MiniMax-M2.7 รองรับการเรียกใช้เครื่องมือแบบเนทีฟผ่าน 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) และการเรียกใช้เครื่องมือที่แข็งแกร่ง เหมาะสำหรับเอเจนต์และเอาต์พุตที่มีโครงสร้าง
• moonshotai/Kimi-K2.6 – ยอดเยี่ยมสำหรับบทสนทนาและการให้เหตุผลที่ยาวนาน ขีดจำกัดการตอบกลับ 3072
• MiniMaxAI/MiniMax-M2.7 – ความสมดุลของความเร็วและคุณภาพ ขีดจำกัด 4096

ด้วย runtime adapter switching ใน TanStack AI สามารถเก็บโมเดลทั้งสามไว้ในผู้ให้บริการรายเดียวและสลับไปมาระหว่างกันได้ทันที – เช่น งานเอเจนซีที่หนักหน่วงบน Qwen, การตอบกลับที่รวดเร็วบน MiniMax