はじめに
AI機能をWebアプリに組み込もうとして、「どのプロバイダー使おうかな」「APIの仕様が全部違うじゃん」と頭を抱えた経験、ありませんか。
個人的には、OpenAIのAPIを直接叩いていた時期があったんですが、Claudeも試したい、Geminiも気になる...となったときに、それぞれのSDKを調べ直すのがかなり面倒だったんですよね。
そこで出会ったのがVercel AI SDK。これ、意外と知られていない気がするんですが、TypeScriptでAI開発するなら正直これ一択だと思います。
Vercel AI SDKとは
Vercel AI SDKは、Next.jsの開発元であるVercelが提供するオープンソースのTypeScriptツールキットです。GitHubスター数は約20,000、月間ダウンロード数は2,000万を超えるという、かなりの人気ライブラリになっています。
何がすごいかというと、複数のAIプロバイダーを統一されたAPIで扱えるという点。OpenAI、Anthropic(Claude)、Google(Gemini)、xAI(Grok)、Amazon Bedrockなど、20以上のプロバイダーに対応しています。
特徴・メリット
1. プロバイダー切り替えがラク
通常、AIプロバイダーを変更するとなると、APIの呼び出し方法やレスポンスの形式が違うので、コードをかなり書き換える必要があります。
Vercel AI SDKを使えば、モデル名を変えるだけで済む。これ、地味に革命的なんですよね。
2. ストリーミング対応がデフォルト
ChatGPTみたいに、文字がリアルタイムで表示されていくあの体験。自前で実装しようとすると結構大変なんですが、AI SDKなら標準でサポートされています。
3. React/Next.jsとの相性が抜群
useChatというフックを使えば、チャットUIの状態管理が驚くほど簡単になります。メッセージの送信、ストリーミング表示、エラーハンドリングまで、ほぼ自動でやってくれる。
4. TypeScriptファースト
型定義がしっかりしているので、コード補完が効くし、実行前にエラーを発見できる。30代になって思うのは、型があると開発効率が全然違うということ。
インストール方法
基本パッケージのインストールはこれだけです。
npm install ai
使いたいAIプロバイダーに応じて、追加でインストールします。
# OpenAIを使う場合
npm install @ai-sdk/openai
# Claudeを使う場合
npm install @ai-sdk/anthropic
# Geminiを使う場合
npm install @ai-sdk/google
React/Next.jsでUIコンポーネントを使う場合は、以下も追加します。
npm install @ai-sdk/react
基本的な使い方
シンプルなテキスト生成
まずは一番シンプルな使い方から。generateText関数を使います。
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
const { text } = await generateText({
model: openai('gpt-4o'),
prompt: 'TypeScriptの利点を3つ教えてください',
});
console.log(text);
システムプロンプトを設定したい場合は、こんな感じで書けます。
import { generateText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';
const { text } = await generateText({
model: anthropic('claude-sonnet-4-20250514'),
system: 'あなたはシニアエンジニアです。初心者にもわかりやすく説明してください。',
prompt: 'マイクロサービスアーキテクチャとは何ですか?',
});
ストリーミングでリアルタイム出力
長い文章を生成する場合は、ストリーミングを使うとUXが良くなります。
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
const result = streamText({
model: openai('gpt-4o'),
prompt: 'JavaScriptの歴史について詳しく教えてください',
});
for await (const chunk of result.textStream) {
process.stdout.write(chunk);
}
プロバイダーの切り替え
これがAI SDKの真骨頂。モデル部分を変えるだけで、プロバイダーを切り替えられます。
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import { google } from '@ai-sdk/google';
// OpenAI
const result1 = await generateText({
model: openai('gpt-4o'),
prompt: 'Hello!',
});
// Claude
const result2 = await generateText({
model: anthropic('claude-sonnet-4-20250514'),
prompt: 'Hello!',
});
// Gemini
const result3 = await generateText({
model: google('gemini-2.0-flash'),
prompt: 'Hello!',
});
実践的なユースケース
Next.jsでチャットボットを作る
実際の開発で一番よく使うパターンがこれ。useChatフックを使えば、チャットボットが驚くほど簡単に作れます。
フロントエンド(React)
'use client';
import { useChat } from '@ai-sdk/react';
export default function ChatPage() {
const { messages, input, handleInputChange, handleSubmit, status } = useChat({
api: '/api/chat',
});
return (
<div className="max-w-2xl mx-auto p-4">
<div className="space-y-4 mb-4">
{messages.map((message) => (
<div
key={message.id}
className={`p-3 rounded-lg ${
message.role === 'user'
? 'bg-blue-100 ml-auto max-w-[80%]'
: 'bg-gray-100 mr-auto max-w-[80%]'
}`}
>
{message.content}
</div>
))}
</div>
<form onSubmit={handleSubmit} className="flex gap-2">
<input
value={input}
onChange={handleInputChange}
placeholder="メッセージを入力..."
className="flex-1 border rounded-lg px-4 py-2"
disabled={status === 'streaming'}
/>
<button
type="submit"
disabled={status === 'streaming'}
className="bg-blue-500 text-white px-4 py-2 rounded-lg disabled:opacity-50"
>
送信
</button>
</form>
</div>
);
}
バックエンド(API Route)
import { streamText, convertToCoreMessages } 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-4o'),
system: 'あなたは親切なアシスタントです。',
messages: convertToCoreMessages(messages),
});
return result.toDataStreamResponse();
}
これだけで、ストリーミング対応のチャットボットが完成します。正直なところ、以前は同じことをやるのに200行以上書いていたので、時短効果がすごい。
構造化データの生成
JSONなど構造化されたデータを出力させたい場合は、Zodと組み合わせて使えます。
import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
const { object } = await generateObject({
model: openai('gpt-4o'),
schema: z.object({
title: z.string(),
summary: z.string(),
tags: z.array(z.string()),
sentiment: z.enum(['positive', 'negative', 'neutral']),
}),
prompt: '以下の記事を分析してください: ...',
});
console.log(object.title);
console.log(object.tags);
型安全にAIの出力を扱えるので、コスパ的にかなり良いです。
まとめ
Vercel AI SDKを使ってみて思うのは、「AIの民主化」が進んでいるなということ。以前は各プロバイダーのAPIドキュメントを読み込んで、それぞれに対応したコードを書く必要がありました。
でも今は、AI SDKのおかげで、プロバイダーの違いを意識せずにAI機能を実装できる。しかもTypeScriptで型安全に。
個人開発でもプロダクション開発でも、AIを組み込むならVercel AI SDKを使わない理由がないと思います。Next.jsとの相性は言うまでもなく、Vue、Svelte、Node.jsでも使えるので、技術スタックを問わず導入できるのもポイント高いですね。
まずは公式ドキュメントを見ながら、簡単なテキスト生成から試してみてください。QOL上がりますよ。