MastraのエージェントでPlaywright MCPを使ってみる

はじめに

MCPを使ってみたかったのと、自然言語でPlaywrightを操作してみたかったので、MastraでPlaywright MCPを使ってみることにしました。

MCPとは

ここに詳しく書いてありました。

MCPは、アプリケーションがLLMにコンテキストを提供する方法を標準化するオープンプロトコルです。

Playwright MCPとは

https://github.com/microsoft/playwright-mcp

これです。ローカル環境にPlaywrigtのMCPサーバを作ってくれます。
これをツールに追加しておくと、LLMはなんとうまいこと呼び出してくれます。

環境

今回試した私の環境は下記です。

• Windows11
• Powershell
• node 20.18.1
• npm 10.8.2

リポジトリ

https://github.com/edo1z/mastra-mcp-1

これです。

やったこと

• Mastraでエージェントを作る際にMCPサーバをツールに登録します
• そしてツールが使える前提で、普通にプロンプトで作業を依頼します

MastraでエージェントのツールにMCPサーバを登録

https://mastra.ai/docs/agents/mcp-guide

ここにやり方が書いてあります。

import { Agent } from '@mastra/core/agent';
import { MCPConfiguration } from '@mastra/mcp';
import { openai } from '@ai-sdk/openai';

// MCPの設定
export const mcp = new MCPConfiguration({
  servers: {
    playwright: {
      command: 'npx',
      args: [
        '@playwright/mcp@latest',
        '--headless'
      ],
    },
  },
});

// Agentインスタンスを作成
export const webBrowserAgent = new Agent({
  name: 'WebBrowserAgent',
  model: openai('gpt-4o-mini'),
  tools: await mcp.getTools(),
  instructions: 'あなたはウェブサイトにアクセスして情報を取得するエージェントです。'
});

// MCPの接続を閉じる関数
export const disconnect = async () => {
  await mcp.disconnect();
};

MCPツールが使える前提で作業依頼

import 'dotenv/config';
import { mastra } from './mastra/index';
import { disconnect } from './mastra/agents/web-browser-agent';

async function main() {
  try {
    console.log('ウェブブラウザエージェントをテスト中...');
    const result = await mastra.getAgent('webBrowser').generate('https://example.comにアクセスしてタイトルを取得して教えてください');
    console.log('結果:', result.text);
  } catch (error) {
    console.error('エラーが発生しました:', error);
    if (error instanceof Error) {
      console.error('エラーの詳細:', error.stack);
    }
  } finally {
    await disconnect();
    console.log('MCPの接続を閉じました');
  }
}

main().catch(console.error);

まとめ

これだけで、WEBサイトにアクセスしてタイトルを取ってきてくれました。
細かい処理を間違いなくするためには、普通にPlaywrightのコードを作った方がよいかもしれませんが、柔軟にWEBにアクセスするエージェントを作成するには、結構最適なのかもと思いました。
どの位複雑なことができるのか色々試してみたいと思います。