エージェントが本物のブラウザを操作。
偽物ではなく。
AgentsRoomは、すべてのプロジェクトに本物のChromiumブラウザを組み込み、AIエージェントがそれを制御できるようにするAgentsRoom Browser MCPサーバーを提供します。QAエージェントがlocalhostサイトを開き、ボタンをクリック、フォームに入力、スクリーンショットを撮影、コンソールを読み取り、完了と言う前に機能が実際に動作することを検証します。Claude Code、Codex、OpenCode、Gemini CLI、Aider向けのエンドツーエンドのブラウザ自動化、Playwright設定はゼロです。
Agent Teamsと組み合わせてください: Devエージェントが機能を出荷、QAエージェントが組み込みブラウザでlocalhostサイトをロード、検証シナリオを実行、結果をスクリーンショット、サインオフします。ネイティブブラウザ自動化もロードマップにあり、エージェントがモバイルやデスクトップアプリもテストできるよう、React NativeとElectronアプリ向けの将来のMCPサーバーも計画されています。
AgentsRoom Browser MCPデモ: 組み込みChromiumブラウザを通じてClaude Code QAエージェントが駆動するエンドツーエンドのWebアプリテスト。
AgentsRoomのBrowser Automationは2つのものを1つに統合しています。第1に、すべてのプロジェクトルームに組み込まれた本物のChromiumブラウザ、URLバー、戻る/進む、再読み込み、履歴、クリップボードへのスクリーンショット、デフォルトブラウザで開く、プロジェクト毎の永続クッキーとlocalStorage。第2に、Model Context Protocolを通じてAIエージェントにそのブラウザを公開するAgentsRoom Browser MCPサーバー（agentsroom-browser）です。エージェントはクリーンでスクリプタブルなインターフェイスを得ます: navigate、click、type、screenshot、JavaScript評価、要素待機、ページ状態取得、コンソールログ取得、戻る、進む、再読み込み。
なぜこれが重要なのでしょうか？AIコーディングエージェントの全約束は、エージェントが「機能を出荷した」と言うがページを開いて確認しないときに崩壊するからです。今日のほとんどのエージェントはユニットテストの実行に頼り、その後祈ります。本物のbrowser MCPがあれば、エージェントはlocalhostサーバーをロードし、ユーザーフローを実行し、人間のユーザーが見るものを見て、その後にのみサインオフします。QA Engineerエージェント役割は、ついに静的解析だけでなく本物のQAを行うために必要なツールを手にしました。
技術的なセットアップはあなたには見えません。エージェントの「Browser access」にチェックを入れると、AgentsRoomはプロジェクトの.mcp.jsonにagentsroom-browserエントリをマージし、エージェントはブラウザツールが利用可能な状態で起動します。ループバックポート（127.0.0.1、OS割り当て、起動毎に再生成、32バイトの16進トークンで認証）で動作するWebSocketブリッジが、MCPサブプロセスをElectronアプリのChromium WebContentsViewに接続します。各クリック、各入力、各スクリーンショットはJSON-RPC呼び出しです。エージェントはスタブではなく本物のブラウザを見ます。
AgentsRoom Browserパネル: URLバー、履歴、スクリーンショット、AIエージェントがナビゲート、クリック、入力、検証するための完全なMCP制御サーフェス。
Playwrightスタブではない、本物のブラウザ
ブラウザ自動化について語るほとんどのAIエージェントデモは、各ツール呼び出しでスポーンされるヘッドレスのPlaywrightインスタンスを使います。ベンチマークには機能しますが、現実の生活では苦痛です: エージェントが何をしているか見えず、すべてのナビゲーションがChromiumを再スポーンし、クッキーは失われ、localStorageは空で、devサーバーはすべての訪問が新規セッションだと思います。AgentsRoomは異なる角度を取ります。ブラウザはすでにプロジェクトルームで開いており（あなた自身が普通のブラウザのように使います）、エージェントはそのブラウザを駆動します。セッション、クッキー、localStorage、ログイン状態、すべて保持されます。
エージェントからの各クリックと入力は、ElectronのWebContentsViewを通じて適切なキーイベント、マウスイベント、DOM変異と共に本物のネイティブディスパッチをトリガーします。スクリーンショットは実際にレンダリングされたページからキャプチャされた本物のPNGです（DOMから画像へのハックではありません）。コンソールログはバッファされ、警告とエラーを含めてクエリ可能です。エージェントはDevToolsを開いていれば見えるのと同じものを見ます: 本物のパフォーマンス、本物のネットワーク動作、本物のCORS、本物のauth。
ルーム間の隔離が強制されます。AgentsRoomはプロジェクト毎に1つのChromium WebContentsViewを作成し、独自のセッションパーティション（persist:agentsroom-browser-<projectId>）を持ちます。プロジェクトAのクッキーがプロジェクトBに漏れることはありません。プロジェクトを切り替えると、前のブラウザは隠され、新しいブラウザが独自の状態でオンラインになります。エージェントは常に正しいプロジェクトに、正しい認証情報と共に着地します。
MCPレイヤーは意図的に小さく依存関係なしです。browser-mcp-server.cjsサブプロセスはstdio経由でMCP 2024-11-05プロトコル（initialize、tools/list、tools/call）を話し、それをループバックWebSocketブリッジ経由のJSON-RPC呼び出しに翻訳します。重いSDKベースのサーバーと比較して、これは高速（最初のツール呼び出しはサブ100ms）でデバッグしやすいままです。ページを変更するすべてのアクション（click、type、navigate、reload、back、forward）の後、レスポンスには1.6 MBに上限のあるbase64 PNGスクリーンショットが含まれるので、エージェントは常に直前の動作の結果を見ます。これは最大の信頼性向上の1つだとわかりました: 画面を見るエージェントは、希望するエージェントよりもはるかに頻繁に正しいことを行います。
エージェントが手にするBrowser MCPツールキット
ブラウザアクセスを持つすべてのAIエージェントは、これらのツールが利用可能な状態で起動します。標準MCP経由で公開されるので、互換性のある任意のCLI（Claude Code、Codex CLI、OpenCode、Gemini CLI、Aider）から見えます。
browser_navigate
組み込みブラウザでURLを開きます。スマートなURLハンドリング: localhost:3000は「アプリケーションを開けません」ダイアログをトリガーする代わりにhttp://localhost:3000になります。最終URLとロード後のページのスクリーンショットを返します。
browser_click
セレクタまたは見えるテキストで要素をクリックします。JavaScriptディスパッチではなく、本物のネイティブクリックイベント。アクションの結果をエージェントが見られるよう、クリック後のスクリーンショットを返します。
browser_type
inputまたはtextareaにテキストを入力します。キーボードショートカットとsubmitをサポート。本物のキーイベント、ページのonChangeハンドラーが発火します。入力後のスクリーンショットを返します。
browser_screenshot
現在のviewportをPNGとしてキャプチャします。ビジュアルリグレッションチェック、デザインQA、ビフォーアフター比較、またはバグの状態をチームと共有するのに便利です。
browser_evaluate
ページのメインワールドでJavaScript式を実行します。シリアル化された結果を返します。ページ状態の読み取り、DOMクエリ、Reduxストア検査、または見えるボタンがないアクションのトリガーにエージェントが使用します。
browser_wait_for
要素の出現、URLの変更、ネットワークリクエストの完了、または任意のJavaScriptがtrueを返すのを待ちます。古典的な「エージェントがクリックが速すぎる」レースを回避します。
browser_get_state
現在のURL、タイトル、viewport、スクロール位置、ページのアクセシブル要素の構造化スナップショットを読みます。エージェントが次のアクションを計画するときの主要な入力。
browser_get_logs
コンソールバッファを引きます（log、warn、error）。エージェントはDevToolsで見えるのと同じReact警告、hydrationエラー、ネットワーク失敗、ランタイム例外を見ることができます。バグレポートは「コンソールからのエラーはこちら」になります。
browser_go_back / forward / reload
標準のブラウザナビゲーション、スクリプタブル。フローが間違ったときにバックトラックする、またはVite、Next.js、Expo Metroからのhot reload後にページを再テストするためにエージェントが使います。
エージェントがブラウザで実際に行うこと
QA Engineer役割とAgent Teamsで、今日構築できる本物のワークフロー。
ハンドオフ毎のエンドツーエンドスモークテスト
Dev to QAチームを配線します。QAエージェントがlocalhost devサーバーにナビゲート、クリティカルパス（signup、checkout、dashboard）をクリックスルー、結果をスクリーンショット、何も投げなかった場合にのみサインオフします。人間がページを開く前にリグレッションをキャッチします。
ビジュアルリグレッションQA
UI変更時のビフォーアフタースクリーンショット。エージェントが前のコミットでページをロード、スクリーンショット、ブランチを切り替え、スクリーンショット、Claudeに比較を依頼。PercyやChromaticをループに入れずに安価なビジュアルdiff QA。
コンソールエラーハント
エージェントがアプリをナビゲート、browser_get_logsを呼び、React hydration警告、useEffect警告、ネットワーク404、CORSエラー、deprecation通知を見つけます。チームハンドオフペイロードでリスクのリストとして報告し、次のDevエージェントが修正します。
フォームバリデーションテスト
エージェントが有効データ、空フィールド、エッジケース（XSS文字列、非常に長い入力、非ASCII）でフォームを埋めます。バリデーションメッセージ、ネットワークリクエスト、リダイレクトを検証します。本物のフォームQA、ユニットテストではなく。
アクセシビリティ監査
エージェントがページを歩き、browser_get_stateとbrowser_evaluateでアクセシビリティツリーをクエリし、altテキスト、ARIA属性、フォーカス管理、キーボードナビゲーションをチェックします。スクリーンショット付きで問題を報告します。
Figmaに対するデザインQA
Figma to AIエージェント機能と組み合わせます。エージェントがFigmaフレームをロード、スクリーンショット、localhostページをロード、スクリーンショット、間隔、フォント、色、配置を比較します。不一致のリストを提出します。
ライブプレビュートンネル検証
AgentsRoomのlocalhostトンネルとペアリング。エージェントが公開HTTPSプレビューURL（localhostではなく）にナビゲート、サイトが外の世界から到達可能かを検証、スクリーンショット、ステークホルダーが実際にリンクを開けることを確認します。
公開バックログチケットからの顧客バグ再現
URLと再現手順を伴う公開バックログチケットが入ります。QAエージェントがURLを開き、手順に従い、コンソールエラーをキャプチャ、スクリーンショットを添付、クリーンな再現と共にDevにハンドオフします。「再現できない」ループはもう終わり。
エージェントがブラウザを得る方法
ルームでBrowserタブを開く
プロジェクトルームで、右パネルには3つのタブが公開されています: Files、Changes、Browser。Browserをクリック。パネルが広がり、サイドバーが折りたたまれ、本物のChromiumビューが現れます。URLを入力するか、プロジェクト履歴から選びます。
エージェントの「Browser access」をチェック
Edit Agentモーダルを開き、Capabilitiesを展開、Browser accessをチェック。AgentsRoomがプロジェクトの.mcp.jsonにagentsroom-browserエントリをマージし、エージェントは次回起動時にブラウザツールを見るようになります。
<project>/.mcp.jsonエージェントがbrowser MCPと共に起動
エージェントスポーン時、Claude（またはCodex、Gemini等）がagentsroom-browser MCPサーバーを初期化、そのツール（browser_navigate、browser_click、browser_type、browser_screenshot、browser_evaluate、browser_wait_for、browser_get_state、browser_get_logs、browser_go_back、browser_go_forward、browser_reload）をリストし、これからブラウザを駆動できます。
エージェントがブラウザを使う
エージェントがナビゲート、クリック、入力、スクリーンショット、コンソール読み取り。各アクションはループバックWebSocketブリッジ（127.0.0.1、OS割り当てポート、32バイトの16進トークン、デスクトップアプリの起動毎に再生成）を通ります。ページ変更アクションのたびに、スクリーンショットがインラインで返されるので、エージェントは視覚的に動きを検証します。
localhostまたはトンネルを自動ターゲット
localhostトンネルが動作している場合、最初のナビゲーションはトンネルURLに着地します。そうでなければ、最初に検出されたdevサーバー。それ以外はhttps://localhost:3000。Dev Terminalsと組み合わせると、エージェントは文字通りdevサーバーを起動し、ブラウザで開き、テストします。
検証、スクリーンショット、ハンドオフ
Agent Teamsに配線されると、QAノードがシナリオを実行、スクリーンショットをキャプチャ、ハンドオフペイロードでflags.qaPassedを設定します。次のエージェントが評決を継承します。passはPMへ、failはテストヒントと共にDevにループバックします。
内部の仕組み
好奇心ある人へ。ブラウザ自動化スタックは意図的に小さくしてあります。
各プロジェクトには1つのChromium WebContentsView（廃止されたBrowserViewではなく、モダンなElectron API）があり、Reactレンダラーからストリームされる境界でメインウィンドウにオーバーレイされます。プロジェクト毎のセッションパーティションがプロジェクト間でクッキー、localStorage、認証を隔離します。デフォルトのオフスクリーン境界により、人間がBrowserタブを開く前でもエージェントはブラウザツールを呼べ、ハングを避けるためスクリーンショットには5秒のタイムアウトがあります。
軽量WebSocketサーバー（browser-bridge.ts）がOSが選んだループバックポートで動作し、127.0.0.1のみにバインドされます。認証はデスクトップ起動毎に再生成される32バイトの16進トークンを使います。ブリッジファイル~/.agentsroom/browser-bridge.jsonは現在のポート、トークン、PIDを保持し、各起動でアトミックに書き換えられるため、MCPサブプロセスは常に新しい認証情報を自動リトライ付きで取得します。
MCPサーバー自体はbrowser-mcp-server.cjs、stdio経由でMCP 2024-11-05プロトコル（initialize、tools/list、tools/call）を実装するゼロ依存のNodeスクリプトです。手書きのWebSocketクライアント（wsなし、@modelcontextprotocol/sdkなし）を通じてWebSocketブリッジにJSON-RPCを話します。小さく、速く、監査しやすい。デスクトップアプリにextraResourcesファイルとしてバンドルされるので、すべてのインストールはこれを準備完了で出荷します。
ネイティブブラウザサポート（MCPを超えた一級のブラウザ機能）はAgentsRoomロードマップにあります。それを超えて、長期計画にはエージェントが非Webターゲットも駆動できるよう追加のMCPが含まれます: モバイルアプリ用のReact Native MCPとデスクトップアプリ用のElectron MCP。同じアイデア、同じUX: エージェントはコードを書くだけでなく、実際に動くアプリを実行します。
FAQ
Playwright MCPやPuppeteerベースのブラウザツールとどう違いますか？
PlaywrightとPuppeteerベースのMCPは、すべてのセッションで新しいheadlessブラウザをスポーンします。ステートレスなタスクには問題ありませんが、呼び出し間でクッキー、localStorage、authを失い、人間はエージェントが何をしているか見えません。AgentsRoom Browserは、人間がアプリ内で使うのと同じブラウザで、プロジェクト毎の永続セッションを持ち、ユーザーがリアルタイムで見えます。エージェントは、いつでもユーザーが見て上書きできるウィンドウを駆動します。より誠実で、よりデバッグ可能なブラウザ自動化です。
これはすべてのAIプロバイダーで動きますか、それともClaude Codeのみですか？
AgentsRoomがサポートするすべてのプロバイダー（Claude Code、Codex CLI、OpenCode、Gemini CLI、Aider）で動作します。ブラウザツールは、これらすべてのCLIが.mcp.jsonから読む標準のModel Context Protocolを通じて公開されます。エージェントはAgentsRoomにいることを知らず、ただMCPツールのセットを見て、他のツールと同じように使います。
エージェントはリモートサイトを駆動できますか、それともlocalhostだけですか？
両方。任意のURLを入力して進めます。Localhost（とhost:port形式）はスマート検出され、http://でプレフィックスされ、直接開かれます。公開サイトは普通のブラウザのように動作し、プロジェクト毎にクッキーとログイン状態が保持されます。AgentsRoomのlocalhostトンネルと組み合わせると、エージェントは公開HTTPS URLを通じてローカルdevサーバーを駆動でき、これはクロスネットワークやモバイルQAに便利です。
browser MCPは安全ですか？悪用を防ぐものは何ですか？
ブリッジは127.0.0.1のみにバインドされ、0.0.0.0には決してバインドされません。ポートはOS割り当てです（衝突しやすいスキャンのための固定ポートはありません）。すべての接続には32バイトの16進トークンが必要で、デスクトップ起動毎に再生成されます。MCPサブプロセスは認証情報をenv var経由でのみ受け取り、コミットされたファイルには決して入りません。ブラウザアクセスはEdit Agentモーダルでエージェント毎にopt-inです。削除すると、.mcp.jsonエントリが削除され、エージェントはツールを使用できなくなります。
エージェントはブラウザコンソール（エラー、警告、ネットワーク）を見られますか？
はい、browser_get_logs経由で。バッファはページのメインワールドからのconsole.log、console.warn、console.errorメッセージを保持します。多くの本物のバグ（React hydrationエラー、useEffect警告、CORS失敗）はコンソールにのみ表面化し、ユニットテストには現れないので、これはQAエージェントにとって最も信号の高いツールの1つだとわかります。
エージェントに返されるスクリーンショットはどうなりますか？多くのトークンを消費しますか？
ページ変更アクションのたびに、base64 PNGスクリーンショットがツールレスポンスに追加され、1.6 MBに上限が設定されます。それを超えると、テキストマーカーが代わりに送られます。スクリーンショットは信頼性に重要（画面を見るエージェントははるかに少ないミスをする）なので、トレードオフは価値があります。予算上の理由でスクリーンショットを無効にしたい場合、プレーンなbrowser_evaluate呼び出しはテキストのみを返します。
エージェントはログインフォームを埋められますか？セッションを永続化できますか？
はい。クッキーとlocalStorageはpersist:agentsroom-browser-<projectId>セッションパーティション下でプロジェクト毎に永続化されます。エージェントはbrowser_typeとbrowser_clickで一度ログインし、ランの残りの間ログインしたままでいられます。プロジェクトを切り替えるとセッションが変わるので、認証情報がプロジェクト間で漏れることはありません。
devサーバーが動いていないとエージェントは壊れますか？
URLにナビゲートし、Chromiumエラーページを見ます。browser_get_stateとbrowser_get_logs経由でそのエラーを読み、適切に反応できます: サーバーを起動するよう依頼するか、Dev Terminalsコマンドで起動します。Agent TeamsとDev Terminalsで、サーバーを起動、待機、ブラウザを開くワークフローを、人間の介入なしに配線できます。
モバイルアプリとデスクトップアプリもサポートされますか？
Webは今日、組み込みChromiumとAgentsRoom Browser MCPを通じて出荷されています。ロードマップには一級のブラウザ機能としてのネイティブAgentsRoom Browserが含まれます。それを超えて、追加のMCPサーバーが計画されています: エージェントがiOSとAndroid Expoバンドルを駆動できるReact Native MCPと、エージェントがWebではないデスクトップアプリを駆動できるElectron MCP。同じエージェントロジック、非Webターゲットに適用されます。
人間がエージェントを一時停止してブラウザを引き継げますか？
はい。ブラウザは人間が使うのと同じChromiumビューです。いつでも、Browserパネルでクリックすればコントロールできます。インタラクションを止めると、エージェントはツール呼び出しを再開できます。「エージェントロックされたブラウザ」という概念はなく、ペアプログラミングセッションのように共有サーフェスです。
エージェントに本物のブラウザの目を
AgentsRoomの任意のエージェントでBrowser accessをチェック。Browser MCPが自動的に起動します。QAエージェントがついに出荷するものをテストします。
コンパニオンアプリ：外出先でもエージェントを確認
Claude、Codex、OpenCode、Gemini CLI、Aiderに対応
バグや要望を公開バックログに直接送信できます。