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-compatible provider แบบกำหนดเองได้ผ่านฟังก์ชัน openaiCompatible(): กำหนด baseURL, apiKey และรายการโมเดลเพียงครั้งเดียว จากนั้นเลือกโมเดลในการเรียกใช้แต่ละครั้ง Gateway ของเราใช้รูปแบบ Chat Completions ดังนั้นจึงให้ตั้งค่า api: 'chat-completions' (นี่เป็นค่าเริ่มต้น)

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

// Gonka provider — ตั้งค่าครั้งเดียว
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-ของคุณ
  api: 'chat-completions',
  models: [
    'MiniMaxAI/MiniMax-M2.7', // ค่าเริ่มต้น
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // โมเดล reasoning
  ],
})

Streaming-chat บนเซิร์ฟเวอร์ (เช่น route-handler ใน fullstack-framework ใดก็ได้ หรือ TanStack Start) กำหนดความยาวคำตอบผ่าน modelOptions — นี่เป็นจุดเดียวสำหรับพารามิเตอร์แบบ native 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
  })

  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('Gonka คืออะไร?')}>
        ถาม
      </button>
    </div>
  )
}

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

พารามิเตอร์ของโมเดลผ่าน Gateway: บริบทคือ 200K โทเคนสำหรับ 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.0069 ต่อ 1M โทเค็น ขาออกคูณ 3 ซึ่งถูกกว่าราคาโดยตรงของ OpenAI และ Anthropic หลายร้อยถึงหลายพันเท่า

จุดเด่นหลักของ TanStack AI คือคอนแทรคเดียว toolDefinition(): เครื่องมือถูกกำหนดไว้ครั้งเดียว (input/output ผ่าน Zod, ArkType, Valibot หรือ JSON Schema) และการใช้งานจะผูกไว้ที่ฝั่งเซิร์ฟเวอร์หรือไคลเอนต์ MiniMax M2.7, DeepSeek V4 Flash และ GLM-5.3 Flash รองรับการเรียกใช้ tool calling แบบเนทีฟผ่าน 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('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'อากาศในมอสโกเป็นอย่างไรบ้าง?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

วิธีเลือกโมเดล:

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

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