6月23日、Eivind Kjosbakkenが「How to Use Claude Code in Your Browser」と題した記事を公開した。この記事では、Claude Codeにブラウザアクセスを与えることで、コーディングエージェントが自分の実装を自律的に検証できるようにする方法について詳しく紹介されている。
コーディングエージェントにブラウザを使わせる——この一手が、エンジニアの手戻りを大幅に削減する。Claude Codeをはじめとするコーディングエージェントが急速に普及する中、「エージェントに実装させっぱなしにしない」ための仕組みとして、ブラウザ連携が注目されている。
なぜコーディングエージェントにブラウザが必要か
例えばHTMLデザインファイルを渡してフロントエンドの実装を依頼した場合、エージェントはコードを書けるが、ブラウザにアクセスできなければ自分の実装が正しいかどうか確認する手段がない。結果として、デザインのズレや実装ミスを人間が都度フィードバックしなければならなくなる。
ブラウザを与えれば話が変わる。エージェントが実装したページのスクリーンショットを撮り、元のデザインファイルと比較し、差異があれば自分で修正を続けられる。人間が介在するループを減らせる。
ブラウザ操作の仕組み
コーディングエージェントのブラウザ操作は、基本的に以下の3アクションで構成される。
- スクリーンショット取得：現在のページ状態を把握する
- クリック（座標指定）：ボタンや入力フィールドを操作する
- テキスト入力：フォームへの記入など
クリックは座標ベースで、例えば以下のように指定される。
click(x=0.754, y=0.328)
座標は通常0〜1の正規化された値で表現される。エージェントはこの「スクリーンショット→アクション選択→目標確認」のループを繰り返し、ゴールに到達するまで自律的に動き続ける。シンプルな仕組みだが、これだけで相当な操作が可能になる。
Claude Codeでブラウザを有効にする2つの方法
方法1：組み込みのChrome統合
Claude Codeには標準でChrome連携機能が組み込まれており、以下のスラッシュコマンドで有効化できる。
/chrome
これはClaude Code本体に内蔵された機能であり、外部ツールのインストールなしに利用できる。なお、OpenAIのコーディングエージェントであるCodexにも同様のブラウザ操作コマンドが存在する。ただしKjosbakkenによれば、この組み込み実装は「悪くはないが最適ではない」とのことだ。
方法2：Playwright MCP（推奨）
より実用的な方法として、**Playwright MCP**の導入が推奨されている。PlaywrightはMicrosoftが開発するブラウザ自動化ライブラリだ。MCPはModel Context Protocolの略で、Anthropicが策定したオープンな規格であり、エージェントにツールやリソースへのアクセスを与えるための標準的な仕組みとして広く普及しつつある。
インストールはClaude Codeに自然言語で指示するだけでよい。
Install the Playwright MCP to interact with the browser
インストール後はClaude Codeを再起動すれば利用可能になる。他のコーディングエージェントでも同様の手順で導入できる。
Kjosbakkenの経験では、組み込みの/chromeよりPlaywright MCPを使った方がエージェントのタスク完了精度が高いとしている。
エージェントに実装を自己検証させる
ブラウザアクセスを与えたら、あとは「検証まで自分でやれ」と指示するだけだ。Claude Codeには/goal機能があり、目標を達成するまでエージェントが自律的に作業を続ける仕組みだ。これはClaude Code固有の機能で、同様のゴール指定機能がCodexにも存在するとKjosbakkenは述べている。以下のような指示が実践的だ。
/goal continue working on the task, implementing <feature> until you've
fully implemented it and tested and verified it end to end by interacting
with the browser using the playwright MCP, taking screenshots, and
verifying your work, only come back to me once you've both implemented
and fully tested the implementation successfully.
「ブラウザで実際に操作して動作確認が取れるまで戻ってくるな」という指示により、エージェントは実装→確認→修正のループを人間なしで回し続ける。特にデザイン実装のような反復作業で効果が高いとされている。
注意点
記事の末尾でKjosbakkenは一点補足している。ブラウザ操作は今後も重要な手段であり続けるが、APIやMCPで代替できる場合はそちらを優先すべきだとしている。コーディングエージェントはブラウザ操作よりもAPI/MCP経由の方が圧倒的に得意なためだ。また、ブラウザ自動化の一部ユースケースはサービスの利用規約に違反しうる点にも言及されており、用途には注意が必要だ。
詳細はHow to Use Claude Code in Your Browserを参照していただきたい。
