Contents
Next.jsとMastraでチャットボットを構築するメリット
Next.jsとMastraの組み合わせは、LLM（大規模言語モデル）を活用したチャットボット開発に特化したアプローチです。特に企業向けのカスタマーサポートや社内ツールなど、リアルタイムなユーザー対話が求められる場面で有効です。Next.jsのSSR（サーバーサイドレンダリング）とISR（インクリメンタル静的再生成）機能により、高性能かつ柔軟なアプリケーション構築が可能となり、Mastraとの連携でLLMを簡易に統合できます。以下では、この組み合わせの具体的なユースケースや実装手順を解説します。
Next.jsプロジェクトへのMastraインストール
Next.jsプロジェクトにMastraを導入するには、以下の手順と前提条件があります。開発環境の整備がスムーズに進むよう、事前に必要な準備を行ってください。
必要な依存関係の確認
Mastraは@mastra/ai-sdkなどのパッケージを通じて導入可能です。Next.jsプロジェクトではTypeScriptを使用することを強く推奨しており、以下のような前提条件があります。
| 項目 | 内容 | 補足 |
|---|---|---|
| Node.jsバージョン | v16以降 | 最新版が推奨 |
| Next.jsバージョン | 13.0以上 | ISR機能の利用に必要 |
| TypeScript対応 | typescriptとts-nodeをインストール |
型定義ファイル(d.ts)を作成可能 |
環境変数設定手順
Mastra APIキーは.env.localファイルに設定します。以下のように記述し、プロジェクト起動時に読み込まれるようにしてください。
|
1 2 |
MASTRA_API_KEY=your_api_key_here |
注意: .env.localの設定は2か所で重複しており、このセクションで一括説明しています（詳細は後述）。
LLMとの通信設定（モデルコマンドプロトコル）
MastraはLLMとの通信を「モデルコマンドプロトコル」という独自の仕組みで実現しています。以下にAPIキー取得とリクエスト処理の手順を解説します。
APIキーの取得手順
- 公式サイトへのアクセス: Mastraの公式サイト（例: https://mastra.ai）からアカウント作成を行います。※URLは変更される可能性があるため、最新情報を必ず確認してください
- APIキーの発行: パネル内で「モデルコマンドプロトコル」に該当するAPIキーを生成します。
- 環境変数への記述: 生成されたキーを
.env.localファイルに記載し、プロジェクト起動時に読み込む設定を行います。
リクエストパラメータの構成例
以下はNext.js API routeからMastraにリクエストを送る際のコード例です。
|
1 2 3 4 5 6 7 8 9 10 11 |
import { createClient } from '@mastra/ai-sdk'; const client = createClient({ apiKey: process.env.MASTRA_API_KEY!, }); export default async function handler(req, res) { const response = await client.complete('your-prompt-here'); res.status(200).json({ message: response }); } |
このように、createClient()でクライアントを初期化し、complete()メソッドでLLMにプロンプトを送信できます。
自社DB/外部サイトデータ連携方法
チャットボットの精度向上には、内部データや外部情報との連携が不可欠です。以下に具体的な実装例とセキュリティ対策を解説します。
REST API経由のデータ取得
自社DBまたは外部APIから情報を取得する際は、fetch()やaxiosを使用します。以下は価格情報取得のコード例です。
|
1 2 3 4 5 |
export async function getPrice(productName) { const res = await fetch(`https://api.example.com/prices?product=${productName}`); return await res.json(); } |
注意: 外部APIとの連携では、トークン認証やHTTPS通信の必須化を忘れずに。Next.js API routeから呼び出す際は、
NEXT_PUBLIC_で始まる環境変数以外はクライアントサイドに公開しないようにしてください。
会話履歴の永続化実装
チャットボットでは、ユーザーとのやり取りを記録することが重要です。以下にサーバーサイドとクライアントサイドでの保存方法を解説します。
クライアントサイドストレージ活用
localStorageやsessionStorageを使用することで、ブラウザ内で一時的な保存が可能です。以下は履歴の保存処理例です。
|
1 2 3 4 |
const saveHistory = (history) => { localStorage.setItem('chatHistory', JSON.stringify(history)); }; |
サーバーサイドデータベースとの同期
クライアントサイドで保存した履歴を、定期的にNext.js API routeに送信し、PostgreSQLやMongoDBなどのデータベースと同期させます。
- クライアントサイド:
localStorageから履歴を読み込む - イベントハンドラ:
useEffect()で変更があればAPIにPOSTリクエストを送信 - サーバーサイド: API route内でデータベースへ保存
チャットUIのカスタマイズポイント
Next.jsとMastraの組み合わせは、UIの自由度が高いのが特徴です。以下にメッセージコンポーネントやロードインジケータのカスタマイズ例を紹介します。
メッセージコンポーネントの再設計
Tailwind CSSを使用して、ユーザーとボットのメッセージを視覚的に区別するデザインを作成できます。以下はメッセージコンポーネントのコード例です。
|
1 2 3 4 5 6 |
const Message = ({ text, isUser }) => ( <div className={`p-3 rounded-lg ${isUser ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}> {text} </div> ); |
ロードインジケータの実装
LLMから応答を待っている間、ユーザーにロード状態を表示するには、CSSアニメーションを使用します。
|
1 2 |
<span className="animate-pulse">読み込み中...</span> |
まとめと補足情報
Next.jsとMastraの組み合わせにより、LLMによるチャットボット開発が効率的に行えます。以下に本記事の要点を整理します。
- 迅速な開発: Next.jsのISRとMastraの簡易API統合で、開発サイクルが短縮
- 柔軟性: LLMとの通信やデータ連携はプロジェクト規模に応じた設計が可能
- UIカスタマイズ: Tailwind CSSなどを使い、ユーザー体験を向上させる
補足: 本記事で使用したMastra関連のURLやリンクは公式サイトの最新情報に基づいています。変更がある場合は、Mastra公式ドキュメントをご確認ください。
「Next.js + Mastra チャットボットテンプレート」のGitHubリポジトリリンク: https://github.com/mastra-ai/chatbot-nextjs-template