Vercel AI SDK入門 - TypeScriptでAI開発が劇的にラクになる話

はじめに

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);