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

การติดตั้งแพ็คเกจ (Core + OpenAI-adapter ซึ่งมี 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

JoinGonka API key: หากคุณยังไม่มี — ลงทะเบียนที่ gate.joingonka.ai/register เพื่อรับ 3M โทเค็นฟรี และสร้างคีย์ 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: [
    'MiniMaxAI/MiniMax-M2.7', // default
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // reasoning model
  ],
})

แชทแบบสตรีมมิ่งบนเซิร์ฟเวอร์ (เช่น route handler ใน fullstack framework ใดก็ได้ หรือ 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('MiniMaxAI/MiniMax-M2.7'),
    messages,
    modelOptions: { max_tokens: 8192 }, // Gateway output cap
  })

  return toServerSentEventsResponse(stream)
}

React client ผ่านฮุก 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('What is Gonka?')}>
        Ask
      </button>
    </div>
  )
}

ไม่ใช้เซิร์ฟเวอร์: ผู้ให้บริการเดียวกันทำงานในสคริปต์หรือเบ็กเอนด์ได้โดยตรง — เรียก chat() และอ่านสตรีม การเชื่อมต่อกับ Gonka เหมือนกันในทุกตัวเลือก

พารามิเตอร์ของโมเดลผ่าน Gateway: คอนเท็กซ์ — 180K โทเค็นใน MiniMax M2.7, 380K ใน DeepSeek V4 Flash และ 390K ใน GLM-5.3 Flash เพดาน max_tokens — 8192 ใน MiniMax M2.7 และ GLM-5.3 Flash, 32768 ใน DeepSeek V4 Flash หากไม่ได้ระบุ max_tokens ค่าเริ่มต้นสำหรับ non-stream คือ 1500 ดังนั้นสำหรับคำตอบยาวๆ ให้ระบุอย่างชัดเจน

TanStack AI ทำงานได้สะดวกไม่ว่าจะผ่านราคาโดยตรงของ OpenAI/Anthropic หรือผ่าน Gonka โดยเปลี่ยนเพียง baseURL เท่านั้น แต่ราคาแตกต่างกันอย่างมาก มาเปรียบเทียบภาระงานทั่วไปของแอปพลิเคชัน TanStack AI ใน production:

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

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

จุดเด่นหลักของ TanStack AI คือสัญญาเดียวอย่าง toolDefinition() — เครื่องมือถูกนิยามเพียงครั้งเดียว (อินพุต/เอาต์พุตผ่าน Zod, ArkType, Valibot หรือ JSON Schema) แล้วผูกการทำงานจริงไว้ที่ฝั่งเซิร์ฟเวอร์หรือไคลเอนต์ MiniMax M2.7, DeepSeek V4 Flash และ GLM-5.3 Flash รองรับ native tool calling ผ่าน Gonka เอเจนต์จึงทำงานได้อย่างมั่นใจ โดยไม่ต้องแยกวิเคราะห์ข้อความตอบกลับ

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

จะเลือกโมเดลไหนดี:

• MiniMaxAI/MiniMax-M2.7 — ค่าเริ่มต้น สมดุลระหว่างความเร็วและคุณภาพ พร้อม context ยาว เพดานคำตอบ 8192
• deepseek-ai/DeepSeek-V4-Flash-0731 — หนึ่งใน context ที่ยาวที่สุดของเครือข่าย (380K) เหมาะกับ prompt ขนาดใหญ่ที่ประหยัดต้นทุน เพดานคำตอบ 32768
• zai-org/GLM-5.3-Flash — โมเดล reasoning: คิดวิเคราะห์ก่อนตอบ เก่งเรื่องตรรกะซับซ้อน มี context ยาวที่สุดของเครือข่าย (390K) เพดานคำตอบ 8192 โดยกระบวนการคิดจะกิน max_tokens ไปบางส่วน

ด้วย runtime adapter switching ใน TanStack AI คุณจึงเก็บทั้งสามโมเดลไว้ใน provider เดียวและสลับไปมาระหว่างกันได้ทันที เช่น งานที่ต้องคิดวิเคราะห์ใช้ GLM-5.3 Flash ส่วนคำตอบเร็ว ๆ ใช้ MiniMax