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 の無料トークンを取得し、ダッシュボード → 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-あなたのキー
  api: 'chat-completions',
  models: [
    'Qwen/Qwen3-235B-A22B-Instruct-2507-FP8', // デフォルト
    'moonshotai/Kimi-K2.6',
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

サーバーでのストリーミングチャット (たとえば、任意のフルスタックフレームワークのルートハンドラまたは 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('Qwen/Qwen3-235B-A22B-Instruct-2507-FP8'),
    messages,
    modelOptions: { max_tokens: 8192 }, // Gateway 経由の Qwen の上限
  })

  return toServerSentEventsResponse(stream)
}

useChat フックを介した React クライアント — サーバーから 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 経由のモデルパラメータ: 3つのモデルすべてのコンテキストは 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 に切り替えるのがコードの書き換えではなく、1 行の変更 (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 のランタイムアダプター切り替えのおかげで、1 つのプロバイダーで 3 つすべてのモデルを保持し、オンザフライで切り替えることができます。たとえば、Qwen で重いエージェントタスクを処理し、MiniMax で迅速な応答を行います。