TanStack AI + Gonka — TypeScript での超低コスト AI アプリケーション

パッケージのインストール (コア + openaiCompatible を含むOpenAIアダプター)：

# 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 から登録し、3Mの無料トークンを受け取ってください。Dashboardの「API Keys」から jg-xxx キーを作成します。1つのキーと1つの残高で、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 ハンドラー）。応答長は 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 フックで、サーバーからの応答を 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 トークン、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 を指定しない場合の non-stream のデフォルトは 1500 なので、長い応答が必要なときは明示的に指定してください。

TanStack AIは、OpenAI/Anthropicの直接料金でもGonka経由でも同様に便利に動作し、変更が必要なのはbaseURLだけです。しかし、コストは桁違いです。TanStack AIベースの本番アプリケーションの典型的な負荷を比較してみましょう：

TanStack AIのプロバイダー非依存のアプローチにより、Gonkaへの切り替えはコードを書き換えるのではなく、1行（baseURL）を変更するだけで済みます。その際、型安全なツール、構造化出力、Reactフックはそのまま維持されます。数千人のユーザーを抱えるアプリケーションにとって、その差額は月額数万ドルに達することもあります。

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はGonka経由でネイティブのtool callingに対応しているため、テキスト応答のパース不要でエージェントが安定して動作します。

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）を持ち、大きなプロンプトを低コストで処理。応答の上限は32768。
• zai-org/GLM-5.3-Flash — reasoningモデル。回答前に推論し、複雑な論理に強い。ネットワーク最長のコンテキスト（390K）。応答の上限は8192で、推論がmax_tokensの一部を消費します。

TanStack AIのruntime adapter switchingにより、3つのモデルを1つのプロバイダーにまとめてオンザフライで切り替えられます。たとえば推論が必要なタスクはGLM-5.3 Flash、素早い応答はMiniMaxといった使い分けが可能です。