AI Chatbot - VercelのNext.js製チャットボットテンプレートが想像以上に完成度高かった

はじめに

最近、AIチャットボットを自前で作りたいという需要が増えてきていますね。ChatGPTのAPIを叩くだけならまだしも、ちゃんとしたUIや認証、チャット履歴の保存まで考えると、意外と面倒なんですよ。

そこで見つけたのが、Vercelが公式で提供している「AI Chatbot」というテンプレート。GitHubで18,000以上のスターを獲得しているだけあって、完成度がかなり高いです。

個人的には、これを触ってみて「最初からこれ使えばよかった」と思ったので、今回はその紹介をしていきます。

AI Chatbotとは

AI Chatbotは、Vercelが開発したオープンソースのチャットボットテンプレートです。「Chat SDK」とも呼ばれていて、Next.js App Routerをベースにした本格的なAIチャットアプリケーションを素早く構築できます。

正直なところ、「テンプレート」というレベルを超えていて、そのまま本番運用できるレベルの機能が揃っています。

特徴・メリット

1. モダンな技術スタックが全部入り

• Next.js App Router: 最新のReact Server ComponentsとServer Actionsに対応
• AI SDK: Vercel製のAI統合ライブラリで、複数のAIプロバイダーを統一APIで扱える
• shadcn/ui + Tailwind CSS: 見た目もちゃんとしてる
• Radix UI: アクセシビリティもしっかり考慮

これ、自分で一から組み合わせようと思ったら結構な時間がかかりますからね。

2. 複数のAIモデルに対応

デフォルトはxAIですが、OpenAIやFireworksなど複数のプロバイダーに切り替え可能です。API変更の際も、AI SDKが抽象化してくれているので、コードの変更は最小限で済みます。

3. 認証機能が組み込み済み

Auth.jsによる認証が最初から実装されています。ユーザー管理やセッション管理を自分で実装しなくていいのは、時短になりますね。

4. チャット履歴の永続化

Neon Serverless Postgresを使ったデータ永続化に対応。チャット履歴がちゃんと保存されるので、再訪問時も過去の会話を引き継げます。

5. ファイルストレージ対応

Vercel Blobでファイルの保管もできます。画像やドキュメントをアップロードしてAIに分析させる、といった使い方も可能です。

インストール方法

前提条件

• Node.js 18以上
• pnpm（推奨）
• Vercel CLIのインストール

セットアップ手順

# Vercel CLIをインストール
npm i -g vercel

# リポジトリをクローン
git clone https://github.com/vercel/ai-chatbot.git
cd ai-chatbot

# Vercelアカウントとリンク
vercel link

# 環境変数をダウンロード
vercel env pull

# 依存関係をインストール
pnpm install

# データベースのマイグレーション
pnpm db:migrate

# 開発サーバーを起動
pnpm dev

これで http://localhost:3000 にアクセスすれば、チャットボットが動きます。

環境変数の設定

.env.exampleを参考に.envファイルを作成します。主に必要なのは以下の変数です。

# AI プロバイダーのAPIキー
XAI_API_KEY=your_xai_api_key
# または
OPENAI_API_KEY=your_openai_api_key

# データベース接続
DATABASE_URL=your_neon_postgres_url

# 認証関連
AUTH_SECRET=your_auth_secret

重要なのは、.envファイルは絶対にGitにコミットしないこと。APIキーが漏洩すると大変なことになります。

基本的な使い方

プロジェクト構造

ai-chatbot/
├── app/
│   ├── (chat)/
│   │   └── page.tsx      # メインのチャット画面
│   ├── api/
│   │   └── chat/         # チャットAPIエンドポイント
│   └── layout.tsx
├── components/
│   ├── chat.tsx          # チャットコンポーネント
│   ├── message.tsx       # メッセージ表示
│   └── ...
├── lib/
│   ├── ai/               # AI関連のユーティリティ
│   └── db/               # データベース関連
└── ...

チャット機能のカスタマイズ

AI SDKを使ったチャット処理の基本的な流れはこんな感じです。

import { streamText } from 'ai';
import { xai } from '@ai-sdk/xai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: xai('grok-2-1212'),
    messages,
    system: 'あなたは親切なアシスタントです。',
  });

  return result.toDataStreamResponse();
}

モデルを変更したい場合は、providerを差し替えるだけです。

import { openai } from '@ai-sdk/openai';

const result = streamText({
  model: openai('gpt-4o'),
  messages,
});

UIのカスタマイズ

shadcn/uiベースなので、コンポーネントのカスタマイズも簡単です。components/ui/配下のファイルを編集すれば、自分好みのデザインに変更できます。

実践的なユースケース

1. 社内ナレッジベースのチャットボット

システムプロンプトを工夫することで、社内ドキュメントを参照するチャットボットが作れます。RAG（Retrieval-Augmented Generation）と組み合わせれば、より精度の高い回答が可能です。

2. カスタマーサポート

認証機能とチャット履歴の永続化を活かして、顧客ごとの対応履歴を管理できます。

3. プロトタイプ開発

AIアプリのプロトタイプを素早く作りたいときに便利です。基本機能が揃っているので、ビジネスロジックの実装に集中できます。

4. 学習用途

Next.js App RouterやAI SDKの使い方を学ぶ教材としても優秀です。実践的なコードが揃っているので、かなり参考になります。

Vercelへのデプロイ

Vercelへのデプロイはワンクリックで完了します。

1. GitHubにリポジトリをプッシュ
2. Vercelダッシュボードでインポート
3. 環境変数を設定
4. デプロイ実行

非Vercel環境にデプロイする場合は、AI_GATEWAY_API_KEYの設定が必要になります。Vercelの場合はOIDC認証が自動処理されるので、この設定は不要です。

まとめ

AI Chatbotは、正直なところ「テンプレート」というレベルを超えています。認証、データベース、ファイルストレージ、複数AIプロバイダー対応と、本格的なチャットアプリに必要な機能が全部入りです。

個人的には、AIチャットボットを作りたいならまずこれを触ってみることをおすすめします。自分でゼロから作るよりも、このテンプレートをベースにカスタマイズしていく方が、圧倒的にコスパがいいですね。

30代になって思うのは、「車輪の再発明」はできるだけ避けたいということ。先人の知恵を借りて、自分が本当に作りたい部分に時間を使いたいものです。

参考リンク

• GitHub - vercel/ai-chatbot
• Vercel AI SDK Documentation
• Next.js Documentation