Zenn
📆

Mastra + 複数MCPでAIエージェントを構築してみた

に公開
Google Calendar
Playwright
Model Context Protocol
Perplexity
Mastra
tech

✅ この記事でわかること

  • 🤖 複数の MCP（Model Context Protocol）を組み合わせた AI エージェントの作り方
  • 🧩 Mastra エージェント経由で Playwright・Perplexity・Google Calendar MCP を制御する構成
  • 🪢 実際の処理フローを PlantUML のシーケンス図で視覚化
  • 📝 複数の MCP を想定したプロンプトの作りかた

🎯 対象読者

  • 👨‍💻 LLM を活用して業務や日常を自動化したいエンジニア
  • 🔄 MCP に興味があり、複数の MCP を組み合わせたアプリ構築例を探している方
  • 🧠 Mastra や Playwright を使った AI エージェント開発に興味がある方
  • 🛠 ChatGPT を超えた実用的な AI ツールを構築したい個人開発者・スタートアップ

💡 背景

Mastra では複数の MCP を組み合わせて１つのエージェントを作ることができます。

この仕組みを使うことで、１つのプロンプトから複数の MCP に対して指示を送り処理を進めることが可能です。

この記事では以下の３つの MCP を組みあせてアプリを作っています：

  • 🕸 Playwright MCP：Web ページにアクセスして情報を取得
  • 🔍 Perplexity MCP：検索エンジンのように質問に対して調査・要約
  • 📆 Google Calendar MCP：Google カレンダーの操作

🧠 処理の全体像（シーケンス図）

以下の図が、ユーザーの入力から Google カレンダーに登録されるまでの処理全体を示します。

🚀 デモアプリ

今回紹介するデモアプリはこちらからダウンロードできます：

🔗 https://github.com/moksahero/mastra-mcps/tree/main/playwright-perplexity-gcal

📆 google-calendar-mcp の準備

🔗 https://github.com/nspady/google-calendar-mcp

  • 上記レポジトリから OAuth 経由で認証を設定。
  • Google Cloud Setup セクションを参照。
  • google-calendar-mcp のディレクトリで以下を実行：
$ npm run start

⚙️ アプリの起動方法

🔧 バックエンド

  1. /backend/src/server.ts の <absolute-path-to-project-folder> を実際のパスに書き換え
  2. .env に以下を設定：
OPENAI_API_KEY = sk;
PERPLEXITY_API_KEY = pplx;
  1. MCP の設定例：
"google-calendar": {
  command: "node",
  args: ["<absolute-path-to-project-folder>/build/index.js"],
},
  1. セットアップ：
$ npm i
$ npm run start

💻 フロントエンド

$ npm i
$ npm run dev

➡️ http://localhost:3000 からアプリが利用可能に！

✍️ プロンプトを送ってみよう

以下のようなプロンプトを送信：

伊勢神宮のカレンダーからイベント情報をとってきてきてます wb

https://www.isejingu.or.jp/ritual/calendar/

** Playwrightの作業 **
1. 指定のページをみにいく。追加のクリックはしない。
2. ページの中身からイベントリストを作る

** Perplexityの作業 **
3. イベントリストから各イベントの詳細を検索して、できるだけ開催時間も含めて各イベントのサマリーを作る
4. 各項目には、月日、イベントタイトル、サマリーを含める

** Googleカレンダーの作業 **
5. 各イベントタイトルの先頭に(伊勢)と着けて、 サマリーを詳細に入れる
6. サマリーに時間が入っていればそれを使って、入っていなければ午前９時から午前１０時にする
7. 各イベントを moksahero@gmail.com (google-calendar-mcpで認証したメールアドレスで置き換え) の google カレンダーに登録する

正直同じプロンプトを送っても、カレンダーへの登録内容などが違うのでここらへんはデータ構造を意識しながらプロンプトを送れるようになれる必要がありそう...

📸 カレンダー反映イメージ

🧾 まとめ

  • Mastra を使えば、複数の MCP を直感的に扱うエージェントを構築できる
  • Playwright + Perplexity + Google Calendar を組み合わせることで、情報収集からカレンダー登録まで自動化できる
  • 実装の中で MCP の挙動やログも確認でき、拡張性も高い
  • 今後はさらに多様な MCP を組み合わせた業務支援ツールが期待される

👨‍💻 著者について

東京とアムステルダムを拠点に活動中。
東欧・南アジアのエンジニアと連携しながら、QA コンサル・テスト自動化・フルスタック開発・PM 業務まで幅広く担当しています。

Cucumber・Playwright・ChatGPT などを活かした効率的なテスト運用や開発基盤づくりのご相談も歓迎です！

Discussion