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プロバイダー — 一度構成します
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', // デフォルト
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // 推論モデル
  ],
})

サーバー上のストリーミングチャット（任意のフルスタックフレームワークやTanStack Startのルートハンドラーなど）。レスポンスの長さは modelOptions を通じて設定します。これはネイティブのワイヤーパラメータ（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クライアントは 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経由のモデルパラメータ：コンテキストはMiniMax M2.7が200Kトークン、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への切り替えはコードを書き換えるのではなく、1行（baseURL）を変更するだけで済みます。その際、型安全なツール、構造化出力、Reactフックはそのまま維持されます。数千人のユーザーを抱えるアプリケーションにとって、その差額は月額数万ドルに達することもあります。

Gonkaの価格: 入力トークンあたり約$0.0069/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: '都市の天気を取得する',
  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）を持ち、大規模なプロンプトを低コストで処理可能です。応答上限は32768。
• zai-org/GLM-5.3-Flash — 推論モデル：応答前に論理的思考を行い、複雑なロジックに強い。ネットワーク内で最大のコンテキスト（390K）を持ちます。応答上限は8192ですが、推論処理がmax_tokensの一部を消費します。

TanStack AIのruntime adapter switching機能のおかげで、同じプロバイダー内で3つのモデルすべてを保持し、即座に切り替えることができます。例えば、推論が必要なタスクにはGLM-5.3 Flashを、高速な応答が必要な場合にはMiniMaxを使用するといった運用が可能です。