Vercel AI SDK とは？Next.jsでAIアプリを10分で作る方法【2025年最新】

AI機能を簡単にWebアプリに組み込める「Vercel AI SDK」が開発者の間で注目を集めています。この記事では、その使い方から実践的な活用法まで、初心者にもわかりやすく解説します。

Vercel AI SDK の概要

1. Vercel AI SDK とは

Vercel AI SDKは、AI機能をWebアプリケーションに統合するためのオープンソースライブラリです。OpenAI、Anthropic、Google AI などの主要なAIプロバイダーと簡単に連携できます。

2. 主な特徴

• マルチプロバイダー対応：OpenAI、Claude、Gemini など複数のAIサービスに対応
• ストリーミング対応：リアルタイムでAI応答を表示
• React統合：React/Next.jsとの親和性が高い
• TypeScript完全対応：型安全な開発が可能

3. 対応AIプロバイダー

• OpenAI（GPT-4、GPT-3.5）
• Anthropic（Claude）
• Google AI（Gemini）
• Cohere
• Hugging Face
• その他多数

インストールと初期設定

1. プロジェクト作成

npx create-next-app@latest my-ai-app
cd my-ai-app
npm install ai @ai-sdk/openai

2. 環境変数設定

# .env.local
OPENAI_API_KEY=your_openai_api_key_here

3. 基本設定

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

export async function POST(request) {
  const { messages } = await request.json();
  const result = await streamText({
    model: openai('gpt-3.5-turbo'),
    messages,
  });
  return result.toAIStreamResponse();
}

実践例：シンプルなチャットアプリ

フロントエンド（app/page.js）

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

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="max-w-2xl mx-auto p-4">
      <div className="space-y-4 mb-4">
        {messages.map(m => (
          <div key={m.id} className={`p-3 rounded ${
            m.role === 'user' ? 'bg-blue-100 ml-12' : 'bg-gray-100 mr-12'
          }`}>
            <strong>{m.role}:</strong> {m.content}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input 
          value={input} 
          onChange={handleInputChange}
          placeholder="メッセージを入力..."
          className="flex-1 p-2 border rounded"
        />
        <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">
          送信
        </button>
      </form>
    </div>
  );
}

高度な機能の実装

1. ツール呼び出し（Function Calling）

// app/api/tools/route.js
import { openai } from '@ai-sdk/openai';
import { generateText, tool } from 'ai';
import { z } from 'zod';

const weatherTool = tool({
  description: '天気情報を取得',
  parameters: z.object({
    location: z.string().describe('都市名'),
  }),
  execute: async ({ location }) => {
    return `${location}の天気は晴れです。`;
  },
});

export async function POST(request) {
  const { prompt } = await request.json();
  
  const result = await generateText({
    model: openai('gpt-4'),
    prompt,
    tools: { weather: weatherTool },
  });
  
  return Response.json({ result: result.text });
}

2. 画像生成機能

// app/api/image/route.js
import { openai } from '@ai-sdk/openai';
import { generateImage } from 'ai';

export async function POST(request) {
  const { prompt } = await request.json();
  
  const { image } = await generateImage({
    model: openai.image('dall-e-3'),
    prompt,
    size: '1024x1024',
  });
  
  return Response.json({ imageUrl: image.url });
}

3. RAG（文書検索AI）実装

// app/api/rag/route.js
import { openai } from '@ai-sdk/openai';
import { embed, generateText } from 'ai';

export async function POST(request) {
  const { query, documents } = await request.json();
  
  // 文書をベクトル化
  const embeddings = await Promise.all(
    documents.map(doc => embed({
      model: openai.embedding('text-embedding-ada-002'),
      value: doc,
    }))
  );
  
  // 類似文書を検索して回答生成
  const context = documents[0]; // 簡略化
  const result = await generateText({
    model: openai('gpt-4'),
    prompt: `コンテキスト: ${context}\n\n質問: ${query}`,
  });
  
  return Response.json({ answer: result.text });
}

パフォーマンス最適化

1. ストリーミング応答

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

export default function StreamingChat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
    streamMode: 'text',
  });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.content}</div>
      ))}
      {isLoading && <div>AI が入力中...</div>}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">送信</button>
      </form>
    </div>
  );
}

2. キャッシュ機能

// app/api/cached-chat/route.js
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(request) {
  const { messages } = await request.json();
  
  const result = await streamText({
    model: openai('gpt-3.5-turbo'),
    messages,
    experimental_telemetry: {
      isEnabled: true,
      recordInputs: true,
    },
  });
  
  return result.toAIStreamResponse();
}

本番環境での運用

1. エラーハンドリング

// utils/ai-error-handler.js
export function handleAIError(error) {
  if (error.name === 'AI_APICallError') {
    console.error('API呼び出しエラー:', error.message);
    return 'APIでエラーが発生しました。しばらく待ってから再試行してください。';
  }
  return '予期しないエラーが発生しました。';
}

2. レート制限対策

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  // 簡単なレート制限実装
  const ip = request.ip || 'anonymous';
  // レート制限ロジック
  
  return NextResponse.next();
}

活用事例

1. カスタマーサポートボット

• FAQの自動応答
• 問い合わせの初期対応
• エスカレーション判定

2. コンテンツ生成ツール

• ブログ記事の下書き作成
• SNS投稿文の生成
• 商品説明文の自動作成

3. データ分析アシスタント

• レポートの要約生成
• グラフの自動解説
• トレンド分析

メリット・デメリット

メリット

• 開発効率：短時間でAI機能を実装可能
• 拡張性：複数のAIプロバイダーに対応
• TypeScript対応：型安全な開発
• 豊富な機能：ストリーミング、ツール呼び出しなど

デメリット

• API費用：利用量に応じた従量課金
• 依存性：外部AIサービスへの依存
• レスポンス時間：ネットワーク遅延の影響

料金とコスト管理

1. 主要プロバイダー料金比較

2. コスト最適化のコツ

• 適切なモデル選択
• プロンプトの最適化
• キャッシュの活用
• レート制限の実装

まとめ

Vercel AI SDKは、現代のAIアプリ開発において必須のツールとなっています。特に以下のような開発者におすすめです：

• Next.jsでAI機能を実装したい開発者
• 複数のAIプロバイダーを使い分けたい企業
• 高品質なAIアプリを短期間で開発したいスタートアップ
• TypeScriptで型安全なAI開発をしたいチーム

まずは簡単なチャットアプリから始めて、徐々に高度な機能を追加していくことをおすすめします。AIの力を借りて、ユーザーに価値を提供するアプリケーションを作成しましょう。

よくある質問（FAQ）

Q: 無料で使えますか？ A: SDKは無料ですが、AIプロバイダーのAPI利用料が発生します。

Q: どのAIプロバイダーがおすすめですか？ A: 用途によりますが、汎用性ならOpenAI、コスパならClaude-3がおすすめです。

Q: 日本語対応していますか？ A: はい、主要なAIモデルは日本語に対応しています。

Q: 商用利用は可能ですか？ A: はい、各AIプロバイダーの利用規約に従って商用利用可能です。

今すぐVercel AI SDKを試して、次世代のAIアプリケーションを開発してみましょう！

■プロンプトだけでオリジナルアプリを開発・公開してみた！！

■AI時代の第一歩！「AI駆動開発コース」はじめました！

テックジム東京本校で先行開始。

■テックジム東京本校

「武田塾」のプログラミング版といえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
より早く、より安く、しかも対面型のプログラミングスクールです。

＜短期講習＞5日で5万円の「Pythonミニキャンプ」開催中。

＜月1開催＞放送作家による映像ディレクター養成講座

＜オンライン無料＞ゼロから始めるPython爆速講座