Vercel AI SDK デプロイガイド

Next.jsでAIチャットアプリを作るVercel AI SDKの設定手順。

費用

無料

Hobby無料枠
Pro版 $20/月
API利用料は別途

必要なもの

GitHubアカウント
Node.js 18以上
OpenAI / Anthropic APIキー

プロジェクト作成

01. テンプレートから作成

npx create-next-app@latest my-ai-app --example https://github.com/vercel/ai/tree/main/examples/next-openai

02. 環境変数設定

.env.local を作成

OPENAI_API_KEY=sk-...

03. ローカル実行

npm run dev

localhost:3000 で確認

Vercelにデプロイ

01. GitHubにpush

02. Vercelにサインイン

https://vercel.com/

03. New Project → リポジトリをインポート

04. 環境変数を設定

Environment Variables → OPENAI_API_KEY を追加

05. Deploy

自動でビルド・デプロイ。URLが発行される

AI SDKの基本

ストリーミングチャット:

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

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
  });
  return result.toDataStreamResponse();
}

参考リンク

ここから先は、よくある質問と詰まりポイントを詳しく解説します。

Q&A - 環境変数

環境変数が読み込まれない

ローカル: .env.local を使用（.envではない）
Vercel: Project Settings → Environment Variablesで設定
設定後はRedeployが必要

APIキーが漏洩しないか

サーバーサイド（API Route）でのみ使用されるため、クライアントには送信されない。NEXT_PUBLIC_ 接頭辞を付けなければ安全。

Q&A - ビルドエラー

TypeScriptエラー

AI SDKは型が厳密。型エラーが出たら：

@ai-sdk/openai のバージョン確認
ai パッケージのバージョン確認
両方を最新にする

「Module not found」

必要なパッケージ：

npm install ai @ai-sdk/openai

Q&A - ストリーミング

レスポンスがストリーミングされない

streamText と toDataStreamResponse() を使用しているか確認
クライアント側で useChat フックを使用

useChat の使い方

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

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

Q&A - プロバイダー

OpenAI以外を使いたい

AI SDKは複数プロバイダー対応：

// Anthropic
import { anthropic } from '@ai-sdk/anthropic';
model: anthropic('claude-3-5-sonnet-20241022')

// Google
import { google } from '@ai-sdk/google';
model: google('gemini-1.5-pro')

Q&A - Vercel制限

Hobby版の制限

Serverless Function実行時間: 10秒
帯域: 100GB/月
デプロイ: 無制限

長時間のLLM応答はタイムアウトする可能性。

タイムアウトする

ストリーミングを使用（待ち時間を分散）
Pro版にアップグレード（60秒まで）
Edge Runtimeを使用

参考リンク

タグ: #Vercel #AISDK #Nextjs #TypeScript #チャット