playwright-mcpで実現するマルチブラウザAgent環境

はじめに

複数のAgentを別々のブラウザで起動する方法を考えてみた話です。

結論

ワークスペース単位でmcpの設定を行えば実現可能

環境

• VSCode
• playwright-mcp
• GitHub Copilot Agent

設定

ワークスペースを複数用意し、mcp.jsonにchromeとfirefoxを設定する

ワークスペースAのmcp.json

# mcpサーバーの追加から以下コマンドでchromeをinstall
npx @playwright/mcp@latest --browser chrome

mcp.json

{
    "servers": {
        "my-mcp-server-chrome": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "@playwright/mcp@latest",
                "--browser",
                "chrome"
            ]
        }
    }
}

ワークスペースBのmcp.json

npx @playwright/mcp@latest --browser firefox

{
    "servers": {
        "my-mcp-server-firefox": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "@playwright/mcp@latest",
                "--browser",
                "firefox"
            ]
        }
    }
}

ツールの使用

うまく起動できるとchromeとfirefoxそれぞれ選択できるので
選択することで複数Agentでも別ブラウザによる操作が可能になります。

所感

同時に起動させるとどっちのAgentか分かりづらいので
ワークスペースに色を付けると見やすいです。