AI SDK は、開発者が AI 強化されたアプリケーションを構築するのに役立つように設計された強力な TypeScript ライブラリです。このチュートリアルでは、Next.js App Router をベースに、ストリーミングチャット・ユーザーインターフェイスを備えた単純なエージェントを構築します。
Vercel AI SDK 6.x : Getting Started – Next.js App Router クイックスタート
作成 : Masashi Okumura (@classcat.com)
作成日時 : 12/31/2025
バージョン : ai@6.0.3
* 本記事は ai-sdk.dev/docs の以下のページを参考にしています :
* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。
◆ お問合せ : 下記までお願いします。
- クラスキャット セールス・インフォメーション
- sales-info@classcat.com
- ClassCatJP
Vercel AI SDK 6.x : Getting Started – Next.js App Router クイックスタート
AI SDK は、開発者が AI 強化されたアプリケーションを構築するのに役立つように設計された強力な TypeScript ライブラリです。
このクイックスタート・チュートリアルでは、ストリーミングチャット・ユーザーインターフェイスを備えた単純なエージェントを構築します。その過程で、AI SDK を独自のプロジェクトで使用する際の基礎となる主要概念やテクニックを学習します。
前提条件
このクイックスタートを進めるには、以下が必要です :
- ローカル開発マシンに Node.js 18+ と pnpm がインストールされていること。
- Vercel AI Gateway API キー
アプリケーションの作成
新しい Next.js アプリケーションの作成から始めます。このコマンドは my-ai-app という名前の新しいディレクトリを作成して、その中に基本的な Next.js アプリケーションをセットアップします。
ℹ️ App Router と Tailwind CSS を使用するか促された場合には必ず yes を選択してください。Next.js Pages Router クイックスタート・ガイドを探している場合は、こちら をご覧になれます。
pnpm create next-app@latest my-ai-app
新しく作成されたディレクトリに移動します :
cd my-ai-app
依存関係のインストール
ai と @ai-sdk/react をインストールします、AI パッケージと AI SDK の React フックです。AI SDK の Vercel AI Gateway プロバイダー は ai パッケージとともにリリースされています。また、zod もインストールします、これはツール入力を定義するために使用されるスキーマ検証ライブラリです。
ℹ️ このガイドは Vercel AI Gateway プロバイダーを使用しますので、一つの API キーで様々なプロバイダーからの数百のモデルにアクセスできますが、任意のプロバイダーやモデルにそのパッケージをインストールすることで切り替えることができます。詳細は利用可能な AI SDK プロバイダー を確認してください。
pnpm add ai @ai-sdk/react zod
AI Gateway API キーの設定
プロジェクトルートで .env.local ファイルを作成して AI Gateway API キーを追加します。このキーは Vercel AI Gateway でアプリケーションを認証します。
touch .env.local
.env.local ファイルを編集します :
AI_GATEWAY_API_KEY=xxxxxxxxx
xxxxxxxxx を実際の Vercel AI Gateway API キーと置き換えます。
ℹ️ AI SDK の Vercel AI Gateway Provider は AI_GATEWAY_API_KEY 環境変数をデフォルトで使用します。
Route ハンドラの作成
route ハンドラ app/api/chat/route.ts を作成して以下のコードを追加します :
Gateway app/api/chat/route.ts
import { streamText, UIMessage, convertToModelMessages } from 'ai';
export async function POST(req: Request) {
const { messages }: { messages: UIMessage[] } = await req.json();
const result = streamText({
model: "openai/gpt-4o-mini",
messages: await convertToModelMessages(messages),
});
return result.toUIMessageStreamResponse();
}
Provider app/api/chat/route.ts
import { streamText, UIMessage, convertToModelMessages } from 'ai';
import { openai } from "@ai-sdk/openai";
export async function POST(req: Request) {
const { messages }: { messages: UIMessage[] } = await req.json();
const result = streamText({
model: openai("gpt-4o-mini"),
messages: await convertToModelMessages(messages),
});
return result.toUIMessageStreamResponse();
}
このコードで何が起きているか見てみましょう :
- 非同期 POST リクエストハンドラを定義してリクエストの body から messages を抽出します。messages 変数はユーザとチャットボット間の会話履歴を含み、チャットボットが次の生成を行うために必要なコンテキストを提供します。messages は UIMessage 型で、アプリケーション UI で使用するために設計されています – それらはメッセージ履歴全体とタイムスタンプ等の関連メタデータを含みます。
- streamText を呼び出します、これは ai パッケージからインポートされています。この関数は、モデルプロバイダーと (ステップ 1 で定義された) メッセージを含む、configuration オブジェクトを受け取ります。モデルの動作を更にカスタマイズするために追加の 設定 を渡すこともできます。messages キーは ModelMessage[] 配列を想定しています。この型は、タイムスタンプや送信者情報等のメタデータを含まないという点で UIMessage とは異なります。これらの型の間で変換するには、convertToModelMessages 関数を使用します、これは UI 固有のメタデータを取り除き、UIMessage[] 配列を (モデルが想定する) ModelMessage[] 形式に変換します。
- streamText 関数は StreamTextResult を返します。この結果オブジェクトは、結果をストリーミングされたレスポンス・オブジェクトに変換する toUIMessageStreamResponse 関数を含みます。
- 最後に、結果をクライアントに返してレスポンスをストリーミングします。
この Route ハンドラは /api/chat に POST リクエスト・エンドポイントを作成します。
プロバイダーの選択
AI SDK は、ファーストパーティ、OpenAI 互換、コミュニティパッケージを通して、数十のモデルプロバイダーをサポートしています。
このクイックスタートは、デフォルトの グローバルプロバイダー である Vercel AI Gateway プロバイダーを使用します。これは、モデル設定で単純な文字列を使用してモデルにアクセスできることを意味します :
Gateway
model: "openai/gpt-4o-mini";
Provider
model: openai("gpt-4o-mini");
2 つの同等な方法で、ゲートウェイ・プロバイダーを明示的にインポートして使用することもできます :
// Option 1: Import from 'ai' package (included by default)
import { gateway } from 'ai';
model: gateway('anthropic/claude-sonnet-4.5');
// Option 2: Install and import from '@ai-sdk/gateway' package
import { gateway } from '@ai-sdk/gateway';
model: gateway('anthropic/claude-sonnet-4.5');
他のプロバイダーの使用
異なるプロバイダーを使用するには、そのパッケージをインストールしてプロバイダー・インスタンスを作成します。例えば、OpenAI を直接使用するには :
pnpm add @ai-sdk/openai
import { openai } from '@ai-sdk/openai';
model: openai('gpt-5.1');
Wire up the UI
LLM にクエリーできる Route ハンドラを実装したので、次にフロントエンドをセットアップします。AI SDK の UI パッケージはチャットインターフェイスの複雑さを一つのフック、useChat に抽象化しています。
チャットメッセージのリストを表示してユーザメッセージの入力を提供するには、ルートページ (app/page.tsx) を以下のコードで更新します :
app/page.tsx
'use client';
import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
export default function Chat() {
const [input, setInput] = useState('');
const { messages, sendMessage } = useChat();
return (
<div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
{messages.map(message => (
<div key={message.id} className="whitespace-pre-wrap">
{message.role === 'user' ? 'User: ' : 'AI: '}
{message.parts.map((part, i) => {
switch (part.type) {
case 'text':
return <div key={`${message.id}-${i}`}>{part.text}</div>;
}
})}
</div>
))}
<form
onSubmit={e => {
e.preventDefault();
sendMessage({ text: input });
setInput('');
}}
>
<input
className="fixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl"
value={input}
placeholder="Say something..."
onChange={e => setInput(e.currentTarget.value)}
/>
</form>
</div>
);
}
この page は useChat フックを利用しています、これはデフォルトでは先に作成した POST API route (/api/chat) を使用します。このフックはユーザ入力とフォーム送信を処理するための関数と状態を提供します。この useChat フックは複数のユティリティ関数と状態変数を提供します :
- messages – 現在のチャットメッセージ (id, role と parts プロパティを持つオブジェクトの配列)。
- sendMessage – メッセージを chat API に送信する関数。
このコンポーネントはローカル状態 (useState) を使用して入力フィールド値を管理し、入力テキストを引数に sendMessage を呼び出し、入力フィールドをクリアすることでフォーム送信を処理します。
LLM のレスポンスはメッセージ parts 配列を通してアクセスできます。各メッセージは、モデルがレスポンスで生成したすべてを表す parts の順序付けられた配列を含みます。これらのパーツは、後でみるような plain テキスト、推論トークン等を含むことができます。parts 配列はモデルの出力のシークエンスを保持し、生成された順序で各コンポーネントを表示または処理することを可能にします。
アプリケーションの実行
これで、チャットボットに必要なものすべてを構築しました！アプリケーションを起動するには、次のコマンドを使用します :
pnpm run dev
ブラウザで http://localhost:3000 を開いてください。入力フィールドを見るはずです。メッセージを入力してテストすると、AI チャットボットがリアルタイムに応答するのを確認できます。AI SDK は、Next.js で AI チャットインターフェイスを素早く簡単に構築できます。
以上