概要
- mastraを使うことでエージェント機能を実装できます。
- Next.jsでフロント画面を実装し、エージェント機能をmastraのツールを使用して実装します。
- LLMモデルはgoogle AI studioからAPIkeyを取得して実装しています。（無料枠）
Mastraについて
- Mastra（マストラ）は、JavaScript/TypeScript製のオープンソースAIエージェント開発フレームワークです。
- エージェント開発に必要な機能なワークフロー、エージェント、RAG(外部知識検索)、評価など）をまとめて提供するため、対話型アシスタントから自律的なタスク実行エージェントまで幅広く構築可能です。
Mastraのメリット・デメリット
-
メリット：
- TypeScriptの強みを活かし、Webアプリ～サーバーレスとスムーズ統合が可能になります。
- ワークフローやRAG、評価・監視などをひとつのフレームワークで完結できます。
-
デメリット：
- 新しいプロジェクトでコミュニティ規模がまだ小さいです。
- Python中心の資産を流用しづらいそうです。
| フレームワーク（主要言語） | 特徴・強み | 適したユースケース | 注意点・弱み |
|---|---|---|---|
| Mastra | エージェント、ワークフロー、RAG、評価を統合 | フロントエンド～バックエンドをTypeScriptで統一 | Python資産を直接活用しづらい、国内情報が少ない |
| LangChain | 豊富なツール・モデル連携と広大なコミュニティ | Python中心の研究・実験 | 機能が多く習得コストが高い |
mastra_next.js導入方法
## next.jsのプロジェクトを立ち上げる
npx create-next-app@15.5.4
$ npx create-next-app@15.5.4
√ What is your project named? ... mastra-nextjs
√ Would you like to use TypeScript? ... / Yes
√ Which linter would you like to use? » ESLint
√ Would you like to use Tailwind CSS? ... / Yes
√ Would you like your code inside a `src/` directory? ... / Yes
√ Would you like to use App Router? (recommended) ... / Yes
√ Would you like to use Turbopack? (recommended) ... / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No /
## プロジェクト内に移動
cd mastra-nextjs
## mastraクライアント初期化
npx mastra@latest init
✔ Successfully installed Mastra core dependencies
┌ Mastra Init
│
◇ Where should we create the Mastra files? (default: src/)
│ src/
│
◇ Select a default provider:
│ Google
│
◇ Enter your Google API key?
│ Skip for now
│
◇ Make your IDE into a Mastra expert? (Installs Mastra's MCP server)
│ Skip for now
next.config.jsに追加
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
serverExternalPackages: ["@mastra/*"],
};
export default nextConfig;
必要なモジュールをインストール
npm install @ai-sdk/google @mastra/mcp dotenv
環境ファイルの作成
## サンプルファイルを基にenvファイルを作成
cp .env.example .env
[.env]
GOOGLE_GENERATIVE_AI_API_KEY=your-api-key
mastraのサーバーも起動ができるようにする
- ./package.json
"scripts": {
"dev": "next dev --turbopack",
"build": "next build --turbopack",
// 下記を追加
"msdev": "mastra dev",
},
agentの作成
- レシピ生成するagentを作成します。
作成したagentを組み込む
- レシピ生成するagentをmastraの本体に組み込みます。
mastraを起動しagentの動作確認
- 下記のコマンドでmastraを起動し、作成したagentを動かします。
npm run msdev
actions.tsファイルを作成
- Mastraに定義したCookingAgentを呼び出すためのファイルを作成します。
- Mastraと通信の基盤となります。
フロントで実装するためのUI関連のライブラリーを追加
## ui.shadcn
## https://ui.shadcn.com/
npx shadcn@latest init -d
## button,input,cardを追加
npx shadcn@latest add
## Markdownレンダリング用ライブラリ
npm install react-markdown @tailwindcss/typography remark-gfm rehype-highlight
- ./src/app/globals.css
@import "tailwindcss";
@import "tw-animate-css";
/* 下記を追加 */
@plugin "@tailwindcss/typography";
CookingFormコンポーネントを作成
- ユーザーが食材を入力した後にgetCookingInfoアクションを呼び出す仕組みを作成します。
- 【ユーザ】（例：カレーライス）＞ actions.ts ＞ 作成したagent.ts ＞ LLM
- LLMからのレスポンス ＞ 作成したagent.ts ＞ actions.ts ＞ 【ユーザ】
CooKingPageのコンポーネントを作成
- 先ほど作成したCookingFormコンポーネントを組み込みます。
ページ本体の修正
- ページ本体にCooKingPageのコンポーネントを組み込みます。
フロント側で動くか確認
npm run dev
ソース（GitHub）
後記
- 最後まで読んで頂きありがとうございます。
- Next.jsを使い簡易的にエージェント機能を実装することができました。
- Mastraは日本語の記事が少なく、公式のテンプレートから試行錯誤しながら実装が必要になる印象です。
- LangChane・LangGraphを学ぶと実装の流れがイメージしやすかったです。