本記事はtacoms Advent Calendar 2025 の 14 日目の記事です。
1. はじめに
本記事の位置づけ
本記事は、TanStack AI にフォーカスした技術解説記事です。
LLM 系 SDK は数多く存在しますが、本記事では比較は行わず、
「TanStack AI は何が楽で、どこに割り切りがあるのか」を明らかにすることを目的とします。
具体的には、
- TanStack AI は どんな思想で設計されているのか
- React / Next.js の文脈で どこが楽で、どこが割り切りなのか
を、実装ベースで解説します。
TanStack AI とは何か
TanStack AI は、TypeScript / JavaScript 向けのオープンソース AI SDK です。
OpenAI、Anthropic（Claude）、Gemini、Ollama など、複数の LLM プロバイダーを 統一 API で扱えるよう設計されています。
TanStack Query / Router を開発してきた TanStack チームによる SDK で、
- 型安全
- ストリーミング対応
- UI との親和性
を強く意識した設計が特徴です。
※ 2025年12月現在、アルファ版として公開されています。APIは今後変更される可能性があります。
想定読者とゴール
想定読者
- React / Next.js / TypeScript を日常的に使っている
- LLM を「まず UI に組み込みたい」
- LangChain ほど重い抽象化は今は不要
本記事のゴール
- TanStack AI が 自分のプロダクトに向いているか 判断できる
- 強みだけでなく、向いていないケースも把握できる
2. TanStack AI の思想と設計
「AI をライブラリとして扱う」設計
TanStack AI の最大の特徴は、
AI を特別な存在として扱わず、通常のライブラリと同じ感覚で使える点にあります。
- provider（LLM）を adapter として抽象化
- 関数呼び出しベースの API
- フレームワーク非依存
これにより、
UI 側のコードを書きながら、自然に AI を組み込む
という体験が実現されています。
他 SDK との思想的な違い
- LangChain：ワークフロー・RAG・エージェント志向
- Vercel AI SDK：Next.js / React との統合が強力
- TanStack AI：UI 統合最優先・最小抽象化
TanStack AI は「UI 中心」のポジションにいる SDK です。
3. Hello TanStack AI
インストール
npm install @tanstack/ai @tanstack/ai-openai
chat() の基本
import { chat } from '@tanstack/ai';
import { openai } from '@tanstack/ai-openai';
const stream = chat({
adapter: openai(),
model: 'gpt-4o',
messages: [{ role: 'user', content: 'Hello!' }],
});
- adapter を切り替えるだけで他モデルに変更可能
- 戻り値は AsyncIterable（ストリーム）
4. ストリーミング出力と UI 統合
TanStack AI はネイティブでストリーミングをサポートしています。
for await (const chunk of stream) {
setMessages(prev => prev + chunk.content);
}
なぜ UI と相性がいいのか
- 逐次描画できるため UX が良い
- React の state 管理と自然に噛み合う
- Suspense / Streaming と併用可能
「待たせない UI」 を最小コードで実現できます。
5. embedding / toolDefinition
embedding()
import { embedding } from '@tanstack/ai';
import { openai } from '@tanstack/ai-openai';
const vector = await embedding({
adapter: openai(),
model: 'text-embedding-3-small',
input: 'TanStack AI は便利',
});
- 検索・類似度計算向け
- RAG の 部品 として使える
toolDefinition()
import { toolDefinition } from '@tanstack/ai';
import { z } from "zod";
const getWeatherDef = toolDefinition({
name: 'getWeather',
description: '指定した都市の天気を取得',
inputSchema: z.object({
city: z.string(),
}),
});
toolDefinition は、LLM から呼び出される「外部ツールの契約」を定義するための API です。
- ツール名・説明・入出力スキーマを定義する
- 実装や利用する LLM モデルには依存しない
- 実際にどのモデルで使うかは
chat()呼び出し時に決定される
このため、同じツール定義を複数の LLM プロバイダーで使い回すことができます。
6. Next.js との統合
Server Route 例
import { chat, toStreamResponse } from '@tanstack/ai';
import { openai } from '@tanstack/ai-openai';
export async function POST(req: Request) {
const { messages } = await req.json();
const stream = chat({
adapter: openai(),
model: 'gpt-4o',
messages,
});
return toStreamResponse(stream);
}
- toStreamResponse() は AsyncIterable をFetch API 互換の Response に変換するためのヘルパーです
7. TanStack AI が向いているケース / 向いていないケース
向いているケース
- Chat UI / 補完 / 要約
- MVP・プロトタイプ
- React / Next.js プロダクト
- 複数 LLM を切り替えたい
向いていないケース
- 複雑な RAG / Agent 設計
- サーバー主導の大規模パイプライン
8. まとめ
- TanStack AI は UI 中心の軽量 AI SDK
- 学習コストが低く、導入が速い
- LangChain とは競合ではなく役割が違う
「まず UI に AI を入れたい」なら、有力な選択肢になる SDK です。