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

安装包（核心 + OpenAI 适配器，其中包含 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 密钥：如果还没有，请在 gate.joingonka.ai/register 注册，获取 10M 免费令牌，并在 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 提供商 — 配置一次
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-你的密钥
  api: 'chat-completions',
  models: [
    'Qwen/Qwen3-235B-A22B-Instruct-2507-FP8', // 默认
    'moonshotai/Kimi-K2.6',
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

服务器上的流式聊天（例如，任何全栈框架中的路由处理程序或 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('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
    messages,
    modelOptions: { max_tokens: 8192 }, // 通过 Gateway 的 Qwen 限制
  })

  return toServerSentEventsResponse(stream)
}

React 客户端通过 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，非流式的默认值为 1500，因此对于长回复，请明确指定。

TanStack AI 可以通过直接的 OpenAI/Anthropic 费率和 Gonka 进行操作，两者的区别仅在于 baseURL。但价格相差多个数量级。让我们比较一下 TanStack AI 生产应用程序的典型负载：

TanStack AI 的提供商无关方法意味着切换到 Gonka 只需要更改一行代码 (baseURL)，而无需重写代码。您的类型安全工具、结构化输出和 React 钩子保持不变。对于拥有数千用户的应用程序，每月可节省数万美元。

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。

得益于 TanStack AI 中的运行时适配器切换，您可以在一个提供商中保留所有三种模型，并随时切换它们——例如，在 Qwen 上处理繁重的代理任务，在 MiniMax 上处理快速响应。