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-your-key
  api: 'chat-completions',
  models: [
    'moonshotai/Kimi-K2.6', // デフォルト
    'MiniMaxAI/MiniMax-M2.7',
  ],
})

サーバーサイドでのStreamingチャット（例: あらゆるfullstackフレームワークのルートハンドラーや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('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経由のモデルパラメータ：両モデルのコンテキストは200Kトークンです。すべてのネットワークモデルの max_tokens 上限は8192です。max_tokens が指定されていない場合、non-streamのデフォルトは1500となるため、長い回答が必要な場合は明示的に設定してください。

TanStack AIは、OpenAI/Anthropicの直接契約でもGonka経由でも同じように快適に動作し、変更するのはbaseURLのみです。しかし価格は桁違いです。TanStack AIの実稼働アプリケーションにおける典型的な負荷を比較します：

TanStack AIのプロバイダー非依存アプローチにより、Gonkaへの切り替えはbaseURLを1行修正するだけで済み、コード全体を書き直す必要はありません。その間、型安全なツール、構造化出力、Reactフックはそのまま維持されます。何千人ものユーザーを抱えるアプリケーションでは、その差額は月間数万ドルに達します。

Gonkaの価格: 入力トークンが1Mあたり~$0.003、出力は×3です。これはOpenAIやAnthropicの直接料金よりも数百〜数千倍安価です。

TanStack AIの主な特徴は、統一された toolDefinition() コントラクトです。ツールを一度定義すれば（Zod、ArkType、Valibot、またはJSON Schemaによる入出力）、実装はサーバーまたはクライアントに紐付けられます。Kimi K2.6とMiniMax-M2.7は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 },
})

モデルの選び方：

• moonshotai/Kimi-K2.6 — コーディング、推論、エージェントシナリオに優れています。応答上限は8192。
• MiniMaxAI/MiniMax-M2.7 — デフォルト。速度と品質のバランスが良く、長いコンテキストに対応。応答上限は8192。

TanStack AIの実行時アダプター切り替え機能により、1つのプロバイダーで両方のモデルを保持し、即座に切り替えることができます。例えば、重いエージェントタスクにはKimi、高速な応答にはMiniMaxを使用するといった使い分けが可能です。