TanStack AI + Gonka — 低成本的 TypeScript AI 应用程序

安装包（核心 + 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

JoinGonka API 密钥：如果还没有密钥 — 请在 gate.joingonka.ai/register 注册，获取 3M 免费 token，并在 Dashboard → API Keys 中创建 jg-xxx 密钥。一个密钥和一个余额可同时用于 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
  ],
})

服务端流式聊天（例如任意全栈框架或 TanStack Start 中的 route handler）。响应长度通过 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 客户端通过 useChat hook 使用——将服务端响应流式传输到 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 设置模型参数：上下文方面，MiniMax M2.7 为 180K token，DeepSeek V4 Flash 为 380K，GLM-5.3 Flash 为 390K。max_tokens 上限方面，MiniMax M2.7 和 GLM-5.3 Flash 为 8192，DeepSeek V4 Flash 为 32768。如果未指定 max_tokens，非流式默认值为 1500，因此长回答请显式设置。

TanStack AI 通过 OpenAI/Anthropic 直连费率或通过 Gonka 运行的效果完全一致，唯一需要更改的是 baseURL。但成本却有数量级的差异。让我们比较一下 TanStack AI 应用在生产环境下的典型负载：

TanStack AI 的与供应商无关的架构意味着切换到 Gonka 只需修改一行代码（baseURL），而无需重写代码。同时，你的类型安全工具、结构化输出和 React Hooks 将保持不变。对于拥有数千名用户的应用来说，这每月能节省数万美元的成本。

Gonka 定价：输入每 1M tokens 约 $0.0062，输出价格 ×3。这比 OpenAI 和 Anthropic 的直接费率便宜了数百到数千倍。

TanStack AI 的核心亮点是统一的 toolDefinition() 契约：工具只需定义一次（输入/输出通过 Zod、ArkType、Valibot 或 JSON Schema 描述），实现则绑定在服务端或客户端。MiniMax M2.7、DeepSeek V4 Flash 和 GLM-5.3 Flash 均通过 Gonka 支持原生 tool calling，因此 agent 运行稳定可靠——无需解析文本回复。

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 —— 默认之选，速度与质量兼顾，超长上下文。回复上限 8192。
• deepseek-ai/DeepSeek-V4-Flash-0731 —— 全网上下文最长的模型之一（380K），大型 prompt 成本低廉。回复上限 32768。
• zai-org/GLM-5.3-Flash —— 推理模型：先思考再作答，擅长复杂逻辑；拥有全网最长的上下文（390K）。回复上限 8192；推理过程会消耗部分 max_tokens。

借助 TanStack AI 的 runtime adapter switching，你可以将这三个模型放在同一个 provider 下，并随时切换——例如，推理任务交给 GLM-5.3 Flash，快速回答交给 MiniMax。