HQ

devcontainer 内の Coding Agent で Playwright MCP を使う

音声による概要

この音声概要は AI によって生成されており、誤りを含む可能性があります。

Coding Agent （以後単にエージェントと表記します）の勢いがすごいですね。 特にここ数ヶ月は Claude Code や Gemini CLI など CLI で動作するエージェントが盛り上がっていて、古くからの CLI ユーザーとしては嬉しい限りです。

ローカルマシンで動作するエージェントは便利ですが、強力な分、セキュリティ面での配慮も必要です。 HQ では devcontainer を使ったサンドボックス環境でのエージェントの利用を推奨しています。

一方で、devcontainer は通常 GUI 環境がないため、 GUI を前提とした便利な機能を使うことができません。 この制限を受けるツールの一つが Playwright MCPです。

今回は devcontainer 環境で Playwright MCP を使い、headful browser を操作する方法について紹介します。

エージェントと Playwright MCP

エージェントが便利であることは今更ここで言及するまでもありません。 適切な指示のもとで実行されたエージェントは、私たちの開発体験を大きく向上させてくれます。 しかし、この「適切な指示」がなかなか難しいというのもまた、一度でも使ったことがある人ならば共感していただけるのではないでしょうか。

Web アプリケーション開発の文脈でこの問題に革命的な進歩をもたらすのが Playwright MCP です。

Playwright は元々 Microsoft が開発した E2E テストフレームワークですが、 Playwright MCP は Model Context Protocol として Playwright API をラップすることで、エージェントがブラウザを操作するためのインターフェースを提供します。 これによりエージェントは実際のブラウザを確認しながら開発することができるだけでなく、以下のようなことが可能になります:

  • エージェントに実際のブラウザ画面を見せながら指示を出すことができるため、たとえば「ボタンをもっと右に移動して」「この色を少し薄くして」といったより直感的な指示が可能になる。
  • あるいは、エージェントが動作確認をしながら開発を行うため、動いていないことを指摘せずとも、エージェントが勝手に問題を認識し、修正してくれる可能性が高まる。

Playwright はウィンドウを起動しない headless ブラウザも、ウィンドウを起動する headful ブラウザもサポートしています。 単にエージェントに画面を確認させるだけであれば headless モードで十分ですが、エージェントに指示を出すという観点では headful モードが便利です。

devcontainer の利用と課題

繰り返しになりますが、エージェントは強力ですが、強力なツールには同時にリスクも伴います。 特にセキュリティ面での配慮が欠かせません。 エージェントが何を実行していいのか権限を細かく設定できるものの、実行を許可したツールが安全かどうかはまた別の話です。

このような背景から、たとえ最小権限の原則を守っているとしても、エージェントは隔離されたサンドボックス環境で実行することが推奨されます。 Claude Code の --dangerously-skip-permissions のようなオプション1を使用する場合はいうまでもありません。

devcontainer は、こうした開発環境のサンドボックス化を簡単に実現できる優れたソリューションです。 devcontainer を使うことで隔離された環境での開発が可能になり、セキュリティリスクを大幅に低減できます。

一方で devcontainer は通常 GUI 環境がないため Playwright MCP を使って headful browser を起動することができません。 視覚的にエージェントと同じブラウザを見ながら指示をしたい場合は特別な設定が必要になります。

NOTE

headless browser であればここで紹介している回避策を使う必要はありません。

devcontainer 内の エージェントで Playwright MCP を使う

この問題を解決するための最もシンプルで確実な方法は、ホストマシンで Playwright MCP を起動し、devcontainer からそれに HTTP 接続することです。

まずは、ホストマシンで Playwright MCP を起動します:

npx @playwright/mcp@latest --host 0.0.0.0 --port 9222

続いて devcontainer 内で エージェントに MCP の設定を追加します。 Claude Code であれば以下のコマンドを実行します:

claude mcp add --transport http playwright http://host.docker.internal:9222/mcp

これで devcontainer 内の Claude Code からホストマシン上の MCP 経由でブラウザを操作できるようになります。

TIP

ホストマシン上で Playwright が動いているため、スクリーンショットなどのファイルもホストマシンに保存されます。 devcontainer から自動的にファイルを見れるようにするには、 output dir を devcontainer にマウントされたディレクトリに設定しておくと便利です。

npx @playwright/mcp@latest --host 0.0.0.0 --port 9222 --output-dir /path/to/devcontainer/mounted/dir

動作確認

以下の動画はここで紹介した方法を使って Claude Code にこのブログを変更させる様子を録画したものです。

「赤くしたい」と言葉で指示することで、実際にブラウザ上の色を変更している様子を確認できます。2 今回のデモは非常に単純なものですが、同じ画面を見ながらエージェントに指示を出すことが以下に直感的で便利かを実感していただけるのではないでしょうか。

代替アプローチと比較

上述の方法の他にもいくつかのアプローチが考えられます。 しかし、総合的に見て、ホストマシンで MCP を起動する方法が最もシンプルで確実です。 以下に他のアプローチとそのメリット・デメリットをまとめます。

1. ホストマシンで Chromium を起動し devcontainer から CDP で接続する

ホストマシン上で Chromium を remote debugging モードで起動し、devcontainer から Chrome DevTools Protocol（CDP）を使って接続する方法です。

メリット：

  • devcontainer内でMCPサーバーが動作するため、スクリーンショットなどのファイル管理が容易

デメリット：

  • Chrome, Chromium しか使えない
  • ホストマシンの IP アドレスを明示的に指定する必要がある（後述）

WARNING

この方法で devcontainer からホストに接続する際、なぜか host.docker.internal で接続すると意図したように動きません。 そのためホストのIPアドレスを解決し、明示的に指定する必要があります。

以下のコマンドでホストマシン上の Chromium を起動します。

/Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222 --remote-debugging-address=0.0.0.0

続いて devcontainer 内で以下のコマンドを実行して MCP を起動します。

# ホストのIPアドレスを取得
export HOST_IP=$(getent ahostsv4 host.docker.internal | awk '{print $1}' | head -1)

# 解決したIPアドレスを使用してCDP経由で接続
claude mcp add -- playwright npx @playwright/mcp@latest "--cdp-endpoint=http://${HOST_IP}:9222"

2. ホストマシンで Playwright サーバーを起動し devcontainer の MCP から Playwright の remoteEndpoint 設定で接続する

メリット：

  • 理論上は柔軟な設定が可能

デメリット：

  • 実装の複雑さが高い

NOTE

理論上動くはずだが今回試した限りうまく起動できませんでした。 仮に動かせたとしても、 Playwright 固有のあまりメジャーでない機能を使うため、あまり実用的ではないかもしれません。

3. devcontainer に X11 をセットアップして使用する

メリット：

  • devcontainer内で完結するため、ファイル管理が容易
  • 全てのブラウザを使用可能

デメリット：

  • devcontainer が肥大化する
  • セットアップが大変
  • X11の設定やトラブルシューティングが複雑

まとめ

devcontainer 環境で Playwright MCP を使って headful browser を操作するためのアプローチを紹介しました。 今回のアプローチを用いることで devcontainer によるサンドボックス環境を維持しつつ、 Playwright MCP による視覚的な操作が可能になります。

実現する方法は何通りかありますが、ホストマシンでMCPサーバーを起動する方法が最もシンプルで確実です。

Footnotes

  1. 読んで字の如く全ての権限を無視して実行するオプションです。強力な反面、セキュリティリスクが非常に高いので、使用する場合は十分な注意が必要です。 ↩

  2. 動画内では楽をするため変更すべきファイルも教えています ↩