Vercel AI SDK完全ガイド——OpenAI/Anthropic/Geminiを統一APIで使う2026年の標準

「OpenAI APIで実装したけど、Claude も Gemini も試したい」——個別SDKを3つ書き分け、リクエスト/レスポンス形式を毎回変換する作業に2時間溶けた経験はないだろうか。Vercel AI SDK（2026年は単に "AI SDK"）は、それを 「import 1行、関数1つで全プロバイダ統一」に圧縮するTypeScript製オープンソースライブラリだ。月間ダウンロード 2,000万+、AI SDK 6 で Agent・MCP・Tool承認・DevToolsまで揃い、2026年5月の 「LLM 統一インターフェイスの事実標準」になった。

結論から書く：Webアプリ・Node.js から LLM を呼ぶなら、2026年は AI SDK 一択でいい。OpenAI公式SDKや Anthropic SDKを直接書く理由は 「既存コード資産がある」「特殊機能（Anthropic computer use 等）の最先端だけ使う」に限定される。それ以外は AI SDK を経由した方が「乗り換え自由・実装1/3・型安全・React統合済み」で圧倒的に有利だ。

個人視点を先に書く：AI SDK の本当の価値は「ベンダーロックインからの解放」。OpenAI が値上げしたら3行で Anthropic に切り替え、Gemini が新モデル出したらそこだけ試す——これが 1コードベース内で完結する。AI APIとは で書いたとおり、2026年の現実は 「複数モデルを使い分ける」がデフォルト。AI SDK はその切り替えコストを限りなくゼロに近づける。本記事ではAI SDKの正体、なぜ使うべきか、5分で動くクイックスタート、構造化出力、Tool calling とAgent、React統合、プロバイダ切り替え、本番運用の落とし穴3つまでを2026年5月時点の AI SDK 6 ベースで整理する。

1. AI SDKとは——「OpenAI/Anthropic/Geminiを1つのAPIで」

AI SDKは Vercel社が開発したオープンソース TypeScript ライブラリ。GitHub vercel/ai、ライセンス Apache 2.0、月間 2,000万+ダウンロード（2026年5月）。Vercel製だが Vercel上でなくても動く——Cloudflare Workers、AWS Lambda、Deno、自前Node.js、ブラウザ全部OK。

核心機能は 「LLMプロバイダを切り替えるためのアダプタ層」。たとえばこのコード：

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
  model: openai('gpt-5'),
  prompt: '今日の天気を教えて',
});

を Anthropic に切り替えるには 3行だけ書き換える：

import { generateText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';  // ← 変更

const { text } = await generateText({
  model: anthropic('claude-opus-4-7'),  // ← 変更
  prompt: '今日の天気を教えて',
});

呼び出し側のコードは1行も変わらない。これが「1つのAPIで全プロバイダ」の意味だ。プロバイダごとに messages の形式、stop sequence、tool 形式、system prompt 配置、レスポンス JSON 構造が全部違う——それを AI SDK が 裏で吸収する。

2. なぜAI SDKか——3つの実用理由

AI SDK を使う実用的な理由を3つに絞ると、「乗り換え自由・実装1/3・型安全」。

逆に AI SDK が向かないケースもある：① Anthropic computer use のような プロバイダ独自の最先端機能を使い切りたい場合（リリース直後はAI SDK経由でラップされていないこともある）、② Python しか触らない場合（AI SDKはTypeScript専用）、③ 既存コードが OpenAI SDK で完成していて変える理由がない場合。それ以外は2026年は AI SDK 推奨だ。

3. 5分で動かす——generateText から streamText

最小構成は 3ステップ。Node.js / Next.js プロジェクトで実演する。

# Step 1: インストール
npm install ai @ai-sdk/openai
# 環境変数: OPENAI_API_KEY=sk-...

# Step 2: ファイル作成 (app/api/chat/route.ts または index.ts)

// Step 3: コード
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text, usage } = await generateText({
  model: openai('gpt-5'),
  system: 'あなたは丁寧な日本語アシスタントです。',
  prompt: 'AI SDKの利点を3つ挙げて',
});

console.log(text);
console.log(`tokens: ${usage.totalTokens}`);

これで 非ストリーミングで全文取得。実行すると数秒で返答が text に入る。usage でトークン数も自動取得——トークン節約 でも書いたコスト管理がそのままできる。

ストリーミング（タイプライター風UX）に変えるのは 関数名を streamText に変えるだけ：

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

const result = streamText({
  model: openai('gpt-5'),
  prompt: 'AI SDKの利点を3つ挙げて',
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);  // 1トークンずつ出力
}

生のOpenAI SDKだと SSEパース・チャンク結合・終了判定を手書きする必要がある（30〜50行）。AI SDK は for-await ループ1個で完結。同じコードが Anthropic / Gemini でもそのまま動く。

4. 構造化出力——generateObject で型安全JSON

AIに「JSON形式で返して」と頼んでも、ときどき Markdown コードブロックで包んだり、コメントを混ぜたり、構造を勝手に変えたりする。これを根本解決するのが generateObject だ。Zod スキーマで 形を定義すると、AI SDK が パース・バリデーション・リトライを自動でやる。

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-5'),
  schema: z.object({
    title: z.string(),
    tags: z.array(z.string()).max(5),
    sentiment: z.enum(['positive', 'neutral', 'negative']),
    summary: z.string().max(200),
  }),
  prompt: '記事を分析: "AI SDK 6 で..." [本文略]',
});

// object.title, object.tags 等が型補完される
console.log(object.tags);  // string[]

このコードの真価は 「object の型が `z.infer<typeof schema>` で確定」。TypeScript の 型推論が効くので、IDE で object. と打つと title / tags / sentiment / summary が補完される。実行時バリデーションもAI SDKが内部で実行——スキーマ違反なら 自動リトライ。これで「AIが返したJSONをparseして失敗」事故がほぼゼロになる。

5. Tool callingとAgent——AI SDK 6の核心

2026年の AI 開発の主戦場は 「ツール呼び出しエージェント」だ。AI SDK 6 の最大の進化はここ。tools パラメータと stopWhen で ツール実行→AI判断→次ツールのループが書ける。

import { generateText, tool, stepCountIs } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';
import { z } from 'zod';

const { text, steps } = await generateText({
  model: anthropic('claude-opus-4-7'),
  tools: {
    weather: tool({
      description: '都市の天気を取得',
      inputSchema: z.object({ city: z.string() }),
      execute: async ({ city }) => {
        // 実APIコール
        return { temp: 22, condition: 'sunny' };
      },
    }),
    convertToFahrenheit: tool({
      description: '摂氏を華氏に変換',
      inputSchema: z.object({ celsius: z.number() }),
      execute: async ({ celsius }) => celsius * 9/5 + 32,
    }),
  },
  stopWhen: stepCountIs(5),  // 最大5ステップでループ停止
  prompt: '東京の天気を華氏で教えて',
});

このコードでAIは 「weather('東京') → convertToFahrenheit(22)」を自動で順序判断・実行・結果統合する。steps で各ステップの実行履歴も取得可能。

AI SDK 6 では ToolLoopAgent クラスでオブジェクト指向的にも書ける（generateText + stopWhenと等価）。さらに ツール実行承認（人間がツール実行前に確認）、MCP（Model Context Protocol）統合も標準。MCPとは で書いた MCPサーバーを 3行で繋げるのが2026年5月の標準だ。

6. React統合——useChatで10行チャットUI

AI SDK の もう一つの主役が React Hooks。useChat を使うと、ChatGPTライクなUIが10行で書ける。

'use client';
import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

サーバー側（Next.js API Route）：

// app/api/chat/route.ts
import { streamText, convertToModelMessages } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-5'),
    messages: convertToModelMessages(messages),
  });
  return result.toUIMessageStreamResponse();
}

これだけで SSE接続・メッセージ状態管理・ローディング・エラー処理が全部自動。AI SDK 6 では useChat 内で tool 承認UI（ユーザーが「このツール実行していい？」をクリックで承認）まで標準対応。Vue（useChat from @ai-sdk/vue）、Svelte、Solid 用Hooksも提供。

7. プロバイダ切り替え——Claude↔GPT↔Geminiを3行で

2026年5月時点で AI SDK が公式にサポートする主要プロバイダを整理する。

切り替えは import 1行 + model 1行。AI SDK 5 以降は グローバルプロバイダ機能もあり、文字列ID（例 'openai/gpt-5'）だけで切り替え可能になった。主要LLMの知識カットオフ比較 や Claude vs ChatGPT料金 も併読すれば、「コスト・性能・地域要件」でモデルを選び分ける土台ができる。

8. 本番運用の落とし穴3つ

AI SDK は便利だが、本番投入で必ずハマる3つの落とし穴がある。事前に知っておけば事故8割回避。

追加注意：AI SDK は 「LLMアダプタ」であって 「LLM料金代行」ではない。各プロバイダ API キーは 自分で取得・自分で課金。AI APIとは で書いたとおり、料金は OpenAI/Anthropic/Google が直接請求。AI SDK は無料、料金は使用先のLLM分だけ。

まとめ

「Webアプリから LLM を呼ぶ」という設計判断は、2026年5月時点で 「AI SDK 一択」に収束した。月2,000万ダウンロード、AI SDK 6 で Agent・MCP・Tool承認・DevToolsまで揃い、OpenAI/Anthropic/Google/Mistral/xAI/ローカル LLMを 同じコードベースから呼び分けられる。これは 「ベンダーロックインからの解放」であり、「実装コストの1/3化」であり、「型安全な構造化出力」の3点セットだ。

始め方はシンプル：① npm install ai @ai-sdk/openai、② API キー設定、③ generateText({ model, prompt }) 1行。これで動いたら streamText でストリーミング、generateObject でJSON、tools でAgent、useChat でUIと段階的に拡張できる。本番投入前に 3つの落とし穴（プロバイダ機能差・ストリーム中断・型推論オーバー）だけは押さえる。

関連記事として、AI APIとは（基礎）、AI推奨Vercel、MCPとは、トークン節約 も併読してほしい。

FAQ

Q. Vercel上で動かさないと使えませんか？
A. 違います。AI SDK は 純粋なTypeScriptライブラリで、Cloudflare Workers、AWS Lambda、Deno、自前Node.jsサーバー、ブラウザ全部で動く。「Vercel製」だが「Vercel専用」ではない。

Q. 料金はかかりますか？
A. AI SDK 自体は 完全無料・MITライセンス。コストは 呼び出すLLMプロバイダ（OpenAI/Anthropic等）の API利用料のみ。AI SDK は中間に入るだけで追加料金はない。

Q. LangChain や LlamaIndex とどう違う？
A. 役割が違う。AI SDK は 「LLM呼び出しの薄いアダプタ」でWebアプリ統合に最適化。LangChain は 「RAG・Agent ワークフロー」の高機能フレームワーク。「TypeScriptでWeb UIに組み込む」なら AI SDK、「Pythonで複雑な agent パイプライン構築」なら LangChainが現実的な棲み分け。

Q. 既存の OpenAI SDK コードから移行は大変？
A. 単純な openai.chat.completions.create 呼び出しなら 10分で書き直せる。generateText に置き換え、messages を渡すだけ。複雑な機能（function calling、vision）は AI SDK 形式に少し変換が必要だが、ドキュメントの移行ガイドが整備されている。

Q. ローカル LLM（Ollama）でも使える？
A. 使える。@ai-sdk/openai-compatible パッケージで Ollama、LM Studio、vLLM 等の OpenAI 互換APIエンドポイントを全部叩ける。「開発はローカル LLM、本番はクラウド」という切り替えも baseURL 1行変更で完結する。