本記事は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 です。

9. 参考リンク

TanStack AI 公式ドキュメント