0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

MastraとMCPを作って自分用Aiエージェントを作る

Last updated at Posted at 2025-07-12

Mastraを使うと簡単にAiエージェントを作ることができます。
また、MCP(ModelContextProtocol)を使うと、Google CalendarやExaなど、いろんなサービスと連携してくれる執事に仕立てることができます。
作りはいたってシンプルなので、世の中にあるWebAPIを公開しているサービスと連携してみてもよいかと思います。

image.png

今回連携するのは以下です。
Google Calendar : /mcp-googlecalendar
Google Tasks: /mcp-googletask
Gmail: /mcp-gmail
GoogleMap : /mcp-googlemap
Open-meteo : /mcp-weather
Brave Search:/mcp-bravesearch
Exa WebSearch

作成するmcpのエンドポイントも付記しておきました。Exa WebSearchは、Exa側でMcpを公開してもらっているのでそれを使います。

以下にソースコードもろもろアップしてあります。

セットアップ

以下から、ZIPをダウンロードして適当な展開しておきます。

以下を実行します。

> npm install

次に2つのフォルダを作成します。

> mkdir data\gapi
> mkdir data\mastra

.envを作成し、立ち上げるサーバのポート番号を指定します。
HTTPSで立ち上げる場合は、SSL証明書をcertフォルダにおいて、SPORTを指定します。

.env
PORT=30080

各種APIキーの指定

.envに以下を書き込みます。
リモートから接続する場合は、PUBLIC_HOST_NAMEには割り当てられたドメイン名を指定してください。MASTRA_API_KEYは後で使うので覚えておきます。

.env
PUBLIC_HOST_NAME=http://localhost:30080
MASTRA_API_KEY=【適当な秘匿の値】

Geminiのセットアップ

以下にアクセスして、Gemini API Keyを払い出します。

払い出したのち、.envに以下を書き込みます。

.env
GOOGLE_GENERATIVE_AI_API_KEY=【APIキー】

Open-meteoのセットアップ

天気予報のためのOpen-meteoはAPIキーの払い出しは不要のですので、特にやることはないです。

Exa Searchのセットアップ

以下にアクセスして、APIキーを払い出します。

払い出したのち、.envに以下を書き込みます。

.env
EXA_API_KEY=【APIキー】

GoogleMapのセットアップ

以下にアクセスして、APIキーを払い出します。

作成するのは、API キーです。
アプリケーションの制限にはなしを指定します。

APIの制限として、以下のAPIを選択します。
・Maps JavaScript API
・Places API
・Geocoding API
・Distance Matrix API
・Maps Elevation API

払い出したのち、.envに以下を書き込みます。

.env
GOOGLEMAP_API_KEY=【APIキー】

Brave Searchのセットアップ

以下のサイトにアクセスして、APIキーを払い出します。

払い出したのち、.envに以下を書き込みます。

.env
BRAVE_API_KEY=【APIキー】

Google系サービスのセットアップ

今回は、GoogleCalendar、Gmail、GoogleTaskを使うので、それらAPIを有効化します。

Google Cloud Console : APIとサービス:有効化APIとサービス
https://console.cloud.google.com/apis/dashboard

次に、APIキーを払い出す必要があります。
以下のGoole Cloudにアクセスして、OAuth2.0 クライアントIDを払い出します。

Google Cloud Console : APIとサービス:認証情報
https://console.cloud.google.com/apis/credentials?hl=ja

承認済みのリダイレクトURIとして、PUBLIC_HOST_NAMEで指定したホスト名に「/gapi-login」を付け足します。

例:http://localhost:30080/gapi-login

払い出したのち、.envに以下を書き込みます。GAPI_API_KEYは後で使うので覚えておきます。

.env
GOOGLEAPI_CLIENT_ID=【クライアントID】
GOOGLEAPI_CLIENT_SECRET=【クライアントシークレット】
GOOGLEAPI_REDIRECT_URL=【承認済みのリダイレクトURIと同じ値】
GAPI_API_KEY=【適当な秘匿の値】

必要に応じて以下を編集します。
今回使うGoogleサービスのアクセスしたい権限を指定しています。

api\controllers\gapi\index.js
const GOOGLEAPI_SCOPES = [
  "openid",
  'profile',
  'https://www.googleapis.com/auth/gmail.send',
  'https://www.googleapis.com/auth/calendar.readonly',
  'https://www.googleapis.com/auth/calendar.events',
  'https://www.googleapis.com/auth/tasks',
];

準備が整いました、サーバを起動します。

> node app.js

事前準備

Google系アクセストークンの生成

Gooleサービスを使う前に、本人認証しておく必要があります。トークンを生成するためのページも作っておきました。この認証が完了すると、ファイルとしてアクセストークンやリフレッシュトークンが保存され、以降自動的に使われるようになります。
以下アクセスして認証します。PUBLIC_HOST_NAMEで指定したホスト名を指定してください。

image.png

apikeyにGAPI_API_KEYに指定した値を指定して、「authorize」ボタンを押下してください。認証するGoogleアカウントの選択が出てきます。

image.png

洗濯しているGoogle Cloudのアカウントの公開ステータスがテスト中の場合は以下のような表示がでてきます。

image.png

続行を選択して、先に進みます。

image.png

以下の画面は以前に認証したかどうかで表示は異なります。

image.png

こんな感じでアクセストークンが生成されています。
内容はサーバに保持されているのでメモる必要はないです。

image.png

ちなみに、Google Cloudアカウントの公開ステータスがテスト中の場合は、リフレッシュトークンの有効期間は7日だそうです。そのときは期限が切れてしまうので、この画面から再度「authorize」する必要があります。

Google Calendarの準備

ついでに、Google CalendarにAiエージェント専用のカレンダーリストを作成します。
(Aiエージェントが間違って他の予定を削除してしまわないように)

以下を、ブラウザから開きます。

Googleアカウントログインが求められますが、先ほどのhttp://localhost:30080/gapi-startでログインしたのと同じアカウントでログインしてください。
左側の「他のカレンダー」右にある+ボタンを押下し、「新しいカレンダーを作成」を選択します。

image.png

名前として「Aiエージェント」にして、カレンダーを作成します。

image.png

準備が整いました、サーバを再起動します。

> node app.js

Aiチャットエージェントの使い方

以下にアクセスします。ちなみに、このコンテンツはpublic/chatagentにあります。

http://localhost:30080/chatagent

image.png

まずは、APIキーボタンから、APIキーを指定します。
MASTRA_API_KEYで指定した文字を指定します。

下のテキストエリアに、「こんにちは」と入力すると、「こんにちは。何かお手伝いできることはありますか?」と返ってきました。

image.png

Google Calendar

Google Calendarの実行例です。下の会話の方が古く、上の会話の方が新しいです。

image.png

AndroidからGoogle Calendarを見ると、予定が追加されているのがわかります。

Google Tasks

image.png

こちらも、AndroidのGoogle ToDoアプリから見ると、タスクが追加されているのがわかります。

Gmail

image.png

これで、ちゃんとメールが飛んでいました。内容も書かれてました。

GoogleMap

image.png

Exa WebSearch、Brave Search

Webで調べて、というとBrave Searchの方を使うようで、Exaでというとそちらでも調べてくれました。

image.png

Open-meteo

image.png

デバッグ

どのMCPのToolに対してどのような引数で呼び出しているか、スレッドを選択することで確認できるようにしておきました。
各会話の左側のチェックボックスをOnにすると、詳細な内容が表示されます。

以下の図の例では、

type tool-call
toolName GoogleCalendar_insert_event
{"summary":"掃除","description":"家の中の大掃除","start_date":"2025-07-13T10:00:00+09:00","end_date":"2025-07-13T12:00:00+09:00"}

となっており、GoogleCalendar_insert_eventという名前のtoolに、{"summary":"掃除","description":"家の中の大掃除","start_date":"2025-07-13T10:00:00+09:00","end_date":"2025-07-13T12:00:00+09:00"}という引数で呼び出しています。

image.png

toolのリストは、右上の「Tools」ボタンを押下することでわかります。紹介しなかったToolもあるので、試してみてください。

image.png

備忘録

以上。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?