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

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

// Provider Gonka — ตั้งค่าเพียงครั้งเดียว
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: [
    'moonshotai/Kimi-K2.6', // default
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

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

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

พารามิเตอร์ของโมเดลผ่าน Gateway: ทั้งสองโมเดลมี Context อยู่ที่ 200K token โดยมีเพดาน max_tokens อยู่ที่ 8192 สำหรับทุกโมเดลในเครือข่าย หากไม่ได้ระบุ max_tokens ค่าเริ่มต้นสำหรับการเชื่อมต่อแบบไม่สตรีมคือ 1500 ดังนั้นสำหรับการตอบกลับที่ยาวกว่านั้น ควรระบุค่านี้ไว้อย่างชัดเจน

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

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

ราคาของ Gonka: เริ่มต้น ~$0.003 ต่อ 1M โทเค็น, ขาออก x3 นี่ถูกกว่าราคามาตรฐานของ OpenAI และ Anthropic เป็นร้อยเป็นพันเท่า

จุดเด่นหลักของ TanStack AI คือสัญญา toolDefinition() เดียวกัน: เครื่องมือหนึ่งตัวถูกอธิบายไว้ครั้งเดียว (รับเข้า/ส่งออกผ่าน Zod, ArkType, Valibot หรือ JSON Schema) โดยสามารถผูกการทำงานไว้ที่ฝั่งเซิร์ฟเวอร์หรือฝั่งไคลเอนต์ Kimi K2.6 และ MiniMax-M2.7 รองรับการทำ Tool calling แบบ Naive ผ่าน 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 },
})

ควรเลือกโมเดลไหน:

• moonshotai/Kimi-K2.6 — เก่งด้านการโค้ดดิ้ง การให้เหตุผล และสถานการณ์ที่ต้องใช้เอเจนต์ มีเพดานการตอบกลับที่ 8192
• MiniMaxAI/MiniMax-M2.7 — ค่าเริ่มต้นที่เน้นสมดุลระหว่างความเร็วและคุณภาพ มี Context ที่ยาว มีเพดานการตอบกลับที่ 8192

ด้วยความสามารถในการสลับ Adapter ระหว่างรันไทม์ใน TanStack AI คุณสามารถเก็บทั้งสองโมเดลไว้ใน Provider เดียวกันและสลับไปมาได้ทันที เช่น ใช้งานเอเจนต์งานหนักบน Kimi และสลับไปใช้ความเร็วของ MiniMax ในการตอบกลับทั่วไป