Playwright MCP Serverを呼び出すMastraをAWS CDKで実装してみた
こんにちは、つくぼし(tsukuboshi0755)です！
最近MastraやMCP Serverに関する情報が増えてきており、いよいよAIエージェントの時代が到来したなと感じています。
今回はMCP Serverを呼び出すAIエージェントをAWS上で検証してみたかったため、Playwright MCP Serverを呼び出すMastraコンテナを、ECS FargateとBedrockで動かすシステムを構築しました。
さらに本システムはCDKプロジェクトでデプロイする事で全てTypeScriptで完結するので、ご興味ある方はぜひご覧ください!
初めに
Mastraとは
Mastraは、AIエージェントの開発を迅速化させ、さまざまなタスクを自動化できるTypeScriptで記述するAIフレームワークです。
TypeScriptで書けるAIフレームワークとしては他にもLangChain.jsが代表的ですが、個人的にはプレイグラウンドが自前で用意されていてすぐに動作確認できるMastraの方が好みです。
以下のように、GitHub Starの数では短期間でMastraがLangChain.jsを追い抜いており、注目のフレームワークとなっています。
MCP(Model Context Protocol)とは
MCPとはModel Context Protocolの略で、AIエージェントが外部ツールやAPIと連携するためのプロトコルです。
このプロトコルを用いる事で、AIエージェントは特定のタスクを実行するために必要な情報を外部から取得し、操作を行う事ができます。
今回は以下のPlaywright MCP Serverを使用して、ブラウザ操作を行うエージェントを構築します！
システムの概要
リポジトリ
今回のシステムは以下のGitHubリポジトリで公開しています。
構成図
本システムは以下の構成で動作します。
ALBからのリクエストを受け取ったECS Fargate タスクであるMastraエージェントが、Bedrockモデルを呼び出します。
呼び出されたBedrockモデルは事前に登録されているPlaywright MCP Serverを通じて、リクエスト内のプロンプトを元にブラウザ操作のツールを呼び出し操作した上で、結果を返す仕組みとなっています。
本システムの特徴
AWSでのインフラ完結
今回はAIモデルとしてBedrockを使用すると共に、ECS上でMastraをコンテナとして稼働させる事で、不要なAPIキーの削減とインフラコストのAWSへの一元化を実現しました。
特にBedrockについては、Vercelが提供する@ai-sdk/amazon-bedrockを使用する事で、AWS認証情報(アクセスキー/シークレットアクセスキー/セッショントークン)を環境変数として渡してアクセスできます。
また@aws-sdk/credential-providersを使用する事で、AWS認証情報の代わりにIAMロールを使用してBedrockを呼び出す事ができます。
今回は環境変数のNODE_ENVにproductionが指定されているかを確認し、指定されていなければローカル検証用としてAWS認証情報を使用、逆に指定されていればAWSのIAMロールを使用するようにしています。
なおAWSクレジットを使用したい場合は、Bedrockで一般的なClaudeシリーズではクレジットとは別で請求されてしまうため、代わりにNovaシリーズのモデルを使用するのがオススメです。
AI SDKを用いたAmazon Bedrockへの接続方法の詳細については、以下のVercel公式ドキュメントも参考にしてください。
CDKの採用
今回は開発言語をTypeScriptで統一したく、CDKを用いてインフラを構築し、MastraエージェントをECS上で動作させる事にしました。
具体的にはECSでよくある構成パターンがまとめられているL3コンストラクタであるecs_patternsの内、ALB + ECS on Fargate を構築するApplicationLoadBalancedFargateServiceを使用する事で実装を抽象化し、簡潔に記述しています。
またECSでMastraを稼働させるためには、ローカルで以下のよなDockerfileを元にコンテナイメージとしてビルド及びECRへのプッシュが必要です。
今回はcdk-docker-image-deploymentというCDKライブラリを用いて、上記作業をCDKデプロイ時に自動化する事を実現しています。
Playwright MCP Serverの使用
今回はMCP ServerのサンプルとしてPlaywright MCP Serverを使用し、ブラウザ操作の自動化を実現します。
このMCP ServerはAPIキーを必要としないため、キーの登録及び管理の手間なく検証を行う事ができます。
今回はオプションに--headlessを指定する事でブラウザをヘッドレスモードで起動しています。
なおディレクトリ構成及びプロンプトについては、以下のGitHubリポジトリを参考にしています。
検証手順
デプロイ方法
ルートディレクトリのpackage.jsonに記載されているnpmコマンドで、ローカル検証及びAWSへのデプロイを完結させています。
以下のREADMEの手順に沿ってシステムをセットアップする事で、数コマンドで簡単にAWS上にデプロイする事ができます。
アクセス方法
npm run cdk:deployによるデプロイ後にターミナルに表示されるMastraMcpOnEcsStack.FargateServiceServiceURLのURLにアクセスする事で、Mastraエージェントにアクセスできます。
(中略)
Outputs:
MastraMcpOnEcsStack.FargateServiceLoadBalancerDNSXXXXXXXX = mastra-alb-XXXXXXXXXX.ap-northeast-1.elb.amazonaws.com
MastraMcpOnEcsStack.FargateServiceServiceURLXXXXXXXX = http://mastra-alb-XXXXXXXXXX.ap-northeast-1.elb.amazonaws.com
(中略)
該当URLをクリックすると、Mastraのエージェント画面が表示されます。
そのままPlaywright Browser Agentを選択すると、以下のようなプロンプト入力画面が現れます。
なお初回はコンテナ内にブラウザがインストールされていないため、エージェントがMCP Serverを通じてplaywright_browser_installツールを使用します。
インストール後にブラウザを用いてエージェントが作業を実施します。
例えば以下の質問を投げると、ブラウザからplaywright_browser_navigateツールによるナビゲートで検索を行った上で、以下のような返答が返ってきます。
- 質問
YahooのITニュースを開いて、今日のニュースの情報検索をして欲しいです
- 回答
<thinking> まずは、ブラウザを開いてYahooのITニュースのページにナビゲートします。その後、ページが正しく読み込まれたかを確認し、今日のニュースの情報検索を行います。 </thinking> <thinking> エラーメッセージによると、Chromium の配布パッケージが見つからないため、ブラウザを開けませんでした。この問題を解決するためには、ブラウザをインストールする必要があります。 </thinking> <thinking> ブラウザが正常にインストールされました。次に、YahooのITニュースのページに再度ナビゲートします。 </thinking> YahooのITニュースページを開くことができました。以下は今日のニュースの情報検索結果です：
トピックス
「FC2WEB」6/30でサービス終了 NEW
「goo blog」サービス終了へ NEW
月曜告げる「月曜マン」SNS反響 NEW
マイナ保険証コピーは無効 注意を
ネットカジノ遮断 新制度を検討へ
事件証拠に健康管理アプリ 相次ぐ
Switch2で話題 microSD Express
Skype終了 Zoomに勝てなかった訳
...
このような形で、AWS上でMastraエージェントを動作させる事ができました！
まとめ
本記事ではPlaywright MCP Serverを呼び出すMastraコンテナを、ECS FargateとBedrockで動かすシステムを構築しました。
今回はPlaywright MCP Serverを使用しましたが、他のMCP Serverもapp/src/mastra/mcp/index.tsの内容を変える事で呼び出す事ができます。
ぜひ自分の好きなMCP Serverを呼び出すMastraエージェントを作成してみてください！
以上、つくぼし(tsukuboshi0755)でした！
Discussion