您的代理驅動一個真實的瀏覽器。
不是假的。
AgentsRoom 在每個專案中嵌入一個真實的 Chromium 瀏覽器，並提供一個讓您的 AI 代理控制它的 AgentsRoom Browser MCP 伺服器。您的 QA 代理開啟您的 localhost 站點，點選按鈕、填寫表單、截圖、讀取 console，並在說完成之前驗證功能真的可用。面向 Claude Code、Codex、OpenCode、Antigravity CLI、Aider、Grok Build、Mistral Vibe 和 Kimi Code 的端到端瀏覽器自動化，零 Playwright 配置。
和 Agent Teams 配對使用：Dev 代理交付功能，QA 代理在嵌入式瀏覽器中載入 localhost 站點，執行驗證場景，截圖結果，簽收。原生瀏覽器自動化也已在路線圖上，未來規劃了面向 React Native 和 Electron 應用的 MCP 伺服器，讓代理也能測試移動和桌面應用。
AgentsRoom Browser MCP 演示：透過嵌入式 Chromium 瀏覽器由 Claude Code QA 代理驅動的端到端 web 應用測試。
AgentsRoom 中的 Browser Automation 把兩件事合二為一。第一，每個專案 room 中嵌入的真實 Chromium 瀏覽器，包含 URL 欄、back/forward、reload、history、截圖到剪貼簿、用預設瀏覽器開啟、按專案持久化的 cookies 和 localStorage。第二，透過 Model Context Protocol 把該瀏覽器暴露給您的 AI 代理的 AgentsRoom Browser MCP 伺服器（agentsroom-browser）。代理獲得一個乾淨、可腳本化的介面：navigate、click、type、screenshot、求值 JavaScript、等待元素、獲取頁面狀態、獲取 console 日誌、後退、前進、重新載入。
為什麼這件事重要？因為當代理說 '功能已交付' 但從不開啟頁面檢查時，AI 編碼代理的整個承諾就崩塌了。今天大多數代理依賴執行單元測試，然後祈禱。有了真實的 browser MCP，代理載入 localhost 伺服器，跑一遍使用者流，看到人類使用者會看到的東西，之後才簽收。QA Engineer 代理角色終於有了它需要的工具來做真正的 QA，而不只是靜態分析。
技術設定對您來說是不可見的。當您在代理上勾選 'Browser access' 時，AgentsRoom 把 agentsroom-browser 條目合併進專案的 .mcp.json，代理啟動時就帶有可用的瀏覽器工具。一個執行在 loopback 埠（127.0.0.1，OS 分配，每次啟動重新生成，用 32 位元組 hex token 認證）上的 WebSocket 橋連線 MCP 子程序到 Electron 應用中的 Chromium WebContentsView。每次點選、每次輸入、每次截圖都是一次 JSON-RPC 呼叫。代理看到的是真實瀏覽器，不是樁。
AgentsRoom Browser 面板：URL 欄、history、截圖，以及讓 AI 代理 navigate、點選、輸入和驗證的完整 MCP 控制面。
一個真實的瀏覽器，不是 Playwright 樁
大多數談到瀏覽器自動化的 AI 代理 demo 在每次工具呼叫時 spawn 一個 headless Playwright 例項。這對 benchmark 有效，但在現實生活中很痛苦：您看不到代理在做什麼，每次 navigation 都重新 spawn Chromium，cookies 丟失，localStorage 為空，您的 dev 伺服器以為每次訪問都是全新會話。AgentsRoom 取另一個角度。瀏覽器已經在您的專案 room 中開啟（您自己像普通瀏覽器一樣使用它），代理驅動那個瀏覽器。會話、cookies、localStorage、登入狀態，全部保留。
代理的每次點選和輸入觸發透過 Electron WebContentsView 的真實原生分發，帶有正確的鍵事件、滑鼠事件和 DOM 變更。截圖是從實際渲染頁面捕獲的真實 PNG（不是 DOM-to-image 的 hack）。console 日誌被緩衝並可查詢，包括警告和錯誤。代理看到的和您開啟 DevTools 時看到的是同一種東西：真實的效能、真實的網路行為、真實的 CORS、真實的 auth。
Room 間隔離被強制執行。AgentsRoom 為每個專案建立一個 Chromium WebContentsView，帶有自己的會話分割槽（persist:agentsroom-browser-<projectId>）。專案 A 的 cookies 永遠不會洩漏到專案 B。當您切換專案時，前一個瀏覽器被隱藏，新的瀏覽器以自己的狀態上線。代理總是落地在正確的專案，帶著正確的憑據。
MCP 層有意保持小巧且零依賴。browser-mcp-server.cjs 子程序透過 stdio 說 MCP 2024-11-05 協議（initialize、tools/list、tools/call），並把它翻譯成透過 loopback WebSocket 橋的 JSON-RPC 呼叫。與重型 SDK 伺服器相比，這保持了快速（首次工具呼叫低於 100ms）和易於除錯。在每次改變頁面的動作（點選、輸入、navigate、reload、back、forward）之後，響應包含一張上限 1.6 MB 的 base64 PNG 截圖，這樣代理總能看到它剛才做的事的結果。這件事原來是最大的可靠性提升之一：看到螢幕的代理遠比抱有希望的代理更頻繁地做對事。
您的代理獲得的 Browser MCP 工具集
每個有瀏覽器訪問的 AI 代理在啟動時就帶有這些工具可用。它們透過標準 MCP 暴露，所以任何相容的 CLI 都看得到：Claude Code、Codex CLI、OpenCode、Antigravity CLI、Aider、Grok Build、Mistral Vibe、Kimi Code。
browser_navigate
在嵌入式瀏覽器中開啟一個 URL。智慧 URL 處理：localhost:3000 會變成 http://localhost:3000，而不是觸發 '無法開啟應用' 的對話方塊。返回最終 URL 和載入後的頁面截圖。
browser_click
透過選擇器或可見文字點選元素。真實的原生點選事件，不是 JavaScript 分發。返回點選後的截圖，讓代理看到動作結果。
browser_type
向 input 或 textarea 輸入文字。支援鍵盤快捷鍵和提交。真實的鍵事件，頁面的 onChange 處理器會觸發。返回輸入後的截圖。
browser_screenshot
把當前 viewport 捕獲為 PNG。適合可視迴歸檢查、設計 QA、前後對比，或與團隊其他成員分享 bug 狀態。
browser_evaluate
在頁面的 main world 中執行 JavaScript 表示式。拿回序列化的結果。代理用它讀取頁面狀態、查詢 DOM、檢查 Redux store，或觸發沒有可見按鈕的動作。
browser_wait_for
等待元素出現、URL 變化、網路請求完成，或任意 JavaScript 返回 true。避免經典的 '代理點選太快' 競態。
browser_get_state
讀取當前 URL、標題、viewport、滾動位置，以及頁面可訪問元素的結構化快照。代理需要規劃下一動作時的主要輸入。
browser_get_logs
拉取 console 緩衝（log、warn、error）。代理能看到您在 DevTools 中看到的同樣的 React 警告、hydration 錯誤、網路失敗和執行時異常。bug 報告變成 '這是 console 中的錯誤'。
browser_go_back / forward / reload
標準的瀏覽器導航，可腳本化。代理在流程出錯時用來回退，或在 Vite、Next.js 或 Expo Metro 的熱過載後重新測試頁面。
代理用瀏覽器實際做什麼
今天就能用 QA Engineer 角色和 Agent Teams 建置的真實工作流程。
每次交接的端到端煙霧測試
連線一個 Dev to QA 團隊。QA 代理 navigate 到您的 localhost dev 伺服器，點選關鍵路徑（signup、checkout、dashboard），截圖結果，僅在沒有丟擲錯誤時簽收。在人類開啟頁面前抓住迴歸。
可視迴歸 QA
UI 變更上的前後截圖。代理在前一個 commit 上載入頁面，截圖，切換分支，截圖，請 Claude 比較。便宜的可視 diff QA，迴圈中無需 Percy 或 Chromatic。
Console 錯誤捕獵
代理 navigate 應用，呼叫 browser_get_logs，發現 React hydration 警告、useEffect 警告、網路 404、CORS 錯誤、deprecation 通知。把它們作為風險列表報告在團隊交接 payload 中，下一個 Dev 代理修復它們。
表單驗證測試
代理用有效資料、空欄位、邊緣情況（XSS 字串、超長輸入、非 ASCII）填寫表單。驗證驗證訊息、網路請求、重定向。真實的表單 QA，不是單元測試。
可訪問性審計
代理走查頁面，透過 browser_get_state 和 browser_evaluate 查詢可訪問性樹，檢查 alt 文字、ARIA 屬性、焦點管理、鍵盤導航。帶著截圖報告問題。
對照 Figma 的設計 QA
和 Figma to AI 代理功能結合。代理載入 Figma 幀，截圖，載入 localhost 頁，截圖，比較間距、字型、顏色、對齊。提交一份不一致清單。
實時預覽隧道驗證
和 AgentsRoom localhost 隧道配對。代理 navigate 到公開 HTTPS 預覽 URL（不是 localhost），驗證站點能從外部世界訪問，截圖，確認相關方真的能開啟連結。
從公開 backlog 工單復現客戶 bug
公開 backlog 工單帶著一個 URL 和復現步驟進來。QA 代理開啟 URL，按步驟操作，捕獲 console 錯誤，附上截圖，帶著乾淨的復現交接給 Dev。再也沒有 '無法復現' 的迴圈。
指向一個元素,直接發給代理
驅動瀏覽器只是故事的一半。有時發現問題的是你自己:一個沒對齊的按鈕、一個文案寫錯的標籤、一張在手機上錯位的卡片。與其用文字描述,不如直接指向它。內建瀏覽器有一個指向模式:點選頁面上任意元素,AgentsRoom 就會從實時 DOM 中捕獲它精確的 CSS 選擇器。
再加上一句簡短備註,比如「收緊這裡的間距」或「這裡顏色不對」,被指向的元素連同你的批註就會作為精確、無歧義的修改請求發給當前活躍的代理。再也不用說「左數第三張卡片」:代理一次性拿到選擇器、周邊上下文和你的意圖。
AgentsRoom 瀏覽器的指向模式:點選一個元素,加上備註,精確的選擇器連同你的批註就會作為指向修改傳送給代理。
進入指向模式
在你的應用上開啟內建瀏覽器,點選指向按鈕。滑鼠懸停時,每個元素都會高亮。
點選元素
點選你想修改的按鈕、文字塊或卡片。AgentsRoom 會鎖定它,並從實時 DOM 中讀取它精確的 CSS 選擇器。
加上備註併傳送
輸入需要修改的內容並確認。選擇器、周邊上下文和你的備註會作為指向修改交給當前活躍的代理。
代理如何獲得瀏覽器
在您的 room 中開啟 Browser 標籤
在您的專案 room 中，右側面板暴露三個標籤：Files、Changes、Browser。點選 Browser。面板變寬，側邊欄摺疊，一個真實的 Chromium 檢視出現。輸入 URL 或從專案 history 中選擇。
在代理上勾選 'Browser access'
開啟 Edit Agent 模態框，展開 Capabilities，勾選 Browser access。AgentsRoom 把 agentsroom-browser 條目合併進專案的 .mcp.json，代理在下次啟動時就會看到瀏覽器工具。
<project>/.mcp.json代理帶著 browser MCP 啟動
代理 spawn 時，Claude（或 Codex、Antigravity 等）初始化 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），從此就能驅動瀏覽器。
代理使用瀏覽器
代理 navigate、點選、輸入、截圖、讀 console。每個動作經過一個 loopback WebSocket 橋（127.0.0.1，OS 分配的埠，32 位元組 hex token，桌面應用每次啟動重新生成）。在每個改變頁面的動作之後，截圖被內聯返回，代理在視覺上驗證它的動作。
自動定向 localhost 或您的隧道
如果 localhost 隧道在執行，第一次 navigation 會落到隧道 URL。否則，落到第一個被檢測到的 dev 伺服器。否則，落到 https://localhost:3000。和 Dev Terminals 結合，代理會真的啟動 dev 伺服器，然後在瀏覽器中開啟它，然後測試它。
驗證、截圖、交接
當連線到 Agent Teams 時，QA 節點跑它的場景，捕獲截圖，在交接 payload 中設定 flags.qaPassed。下一個代理繼承這個判定。透過去 PM，失敗帶著測試提示迴圈回 Dev。
底層細節
給好奇者。瀏覽器自動化棧是有意保持小巧的。
每個專案都有一個 Chromium WebContentsView（現代 Electron API，不是被棄用的 BrowserView），按從 React 渲染器流過來的邊界覆蓋在主視窗上。按專案的會話分割槽在專案間隔離 cookies、localStorage 和認證。預設的離屏邊界讓代理能在人類開啟 Browser 標籤前就呼叫瀏覽器工具，同時截圖有 5 秒超時以避免掛起。
一個輕量 WebSocket 伺服器（browser-bridge.ts）執行在 OS 選擇的 loopback 埠上，僅繫結到 127.0.0.1。認證使用每次桌面啟動重新生成的 32 位元組 hex token。橋檔案 ~/.agentsroom/browser-bridge.json 持有當前的埠、token 和 PID，每次啟動 atomic 重寫，所以 MCP 子程序總是拿到新鮮憑據，並帶自動重試。
MCP 伺服器本身是 browser-mcp-server.cjs，一個零依賴的 Node 腳本，透過 stdio 實現 MCP 2024-11-05 協議（initialize、tools/list、tools/call）。透過手寫的 WebSocket 客戶端（無 ws，無 @modelcontextprotocol/sdk）和 WebSocket 橋說 JSON-RPC。微小、快速、易審計。作為 extraResources 檔案打包進桌面應用，所以每次安裝都開箱即用。
原生瀏覽器支援（超越 MCP 的一等瀏覽器功能）已在 AgentsRoom 路線圖上。在那之上，長期計劃包括額外的 MCP，讓代理也能驅動非 web 目標：面向行動應用的 React Native MCP 和麵向桌面應用的 Electron MCP。同樣的想法，同樣的 UX：代理不只寫程式碼，還真的執行起跑中的應用。
FAQ
這與 Playwright MCP 或基於 Puppeteer 的瀏覽器工具有什麼不同？
基於 Playwright 和 Puppeteer 的 MCP 在每個會話上 spawn 一個全新的 headless 瀏覽器。這對無狀態任務沒問題，但它在呼叫之間丟失 cookies、localStorage 和 auth，而且人類看不到代理在做什麼。AgentsRoom Browser 是人類在應用內使用的同一個瀏覽器，帶按專案持久化的會話，對使用者實時可見。代理驅動的是您隨時可以看到並接管的視窗。一個更誠實、更可除錯的瀏覽器自動化。
這在所有 AI 供應商上都有效，還是隻 Claude Code？
它在 AgentsRoom 支援的每個供應商上都有效：Claude Code、Codex CLI、OpenCode、Antigravity CLI、Aider、Grok Build、Mistral Vibe 和 Kimi Code。瀏覽器工具透過這些 CLI 都從 .mcp.json 讀取的標準 Model Context Protocol 暴露。代理永遠不知道自己在 AgentsRoom 中，它只是看到一組 MCP 工具，像使用任何其他工具一樣使用它們。
代理能驅動遠端站點嗎，還是隻能 localhost？
都行。輸入任何 URL 然後 go。Localhost（和 host:port 形式）會被智慧檢測，加上 http:// 字首，直接開啟。公開站點像在任何普通瀏覽器中一樣工作，按專案保留 cookies 和登入狀態。和 AgentsRoom localhost 隧道結合，代理還能透過公開 HTTPS URL 驅動您本地的 dev 伺服器，這對跨網路和移動 QA 很有用。
browser MCP 安全嗎？什麼阻止它被濫用？
橋僅繫結到 127.0.0.1，永不繫結 0.0.0.0。埠由 OS 分配（沒有易被掃描的固定埠）。每次連線都需要 32 位元組 hex token，每次桌面啟動重新生成。MCP 子程序僅透過環境變數收到憑據，永不出現在任何被提交的檔案中。瀏覽器訪問在 Edit Agent 模態框中按代理 opt-in。如果您移除它，.mcp.json 條目就被移除，代理就不能再使用這些工具。
代理能看到瀏覽器 console（錯誤、警告、網路）嗎？
能，透過 browser_get_logs。緩衝區持有頁面 main world 的 console.log、console.warn 和 console.error 訊息。許多真實 bug（React hydration 錯誤、useEffect 警告、CORS 失敗）只在 console 裡浮現，從不在單元測試中，所以這成了 QA 代理訊號最高的工具之一。
返回給代理的截圖怎麼處理？它們會消耗很多 token 嗎？
在每個改變頁面的動作之後，一張 base64 PNG 截圖被附加到工具響應，上限 1.6 MB。超過的話，傳送一個文字標記代替。截圖對可靠性至關重要（看得到螢幕的代理犯錯少得多），所以這個權衡是值得的。如果您想出於預算原因禁用截圖，單純的 browser_evaluate 呼叫只返回文字。
代理能填登入表單嗎？能持久化它的會話嗎？
能。Cookies 和 localStorage 在 persist:agentsroom-browser-<projectId> 會話分割槽下按專案持久化。代理可以用 browser_type 和 browser_click 登入一次，並在整次執行的剩餘部分保持登入。當您切換專案時，會話改變，所以憑據永不在專案間洩漏。
如果 dev 伺服器沒在跑，代理會崩潰嗎？
它會 navigate 到 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 bundle 的 React Native MCP，以及讓代理能驅動非 web 桌面應用的 Electron MCP。同樣的代理邏輯，應用到非 web 目標。
人類能暫停代理並接管瀏覽器嗎？
能。瀏覽器是人類使用的同一個 Chromium 檢視。任何時候，在 Browser 面板裡點選，您就在控制中。一旦您停止互動，代理可以恢復它的工具呼叫。沒有 '代理鎖定的瀏覽器' 概念，它是一個共享面，就像結對程式設計會話一樣。
關於 : 代理委派
讓更便宜的 QA 代理來開瀏覽器，不是你的 dev 代理
Browser MCP 在 dev 代理不直接駕駛它時表現最佳。代理委派透過一次 run_qa_test MCP 呼叫將瀏覽器測試路由到一個獨立的更便宜的 QA 代理。你的 Opus 或 Codex 留在程式碼上專注，QA 代理在更小的模型上做點選，判定一行返回。同樣的 Browser MCP，更輕的賬單，更乾淨的上下文。
閱讀代理委派頁面給您的代理裝上真正的瀏覽器之眼
在 AgentsRoom 的任何代理上勾選 Browser access。Browser MCP 自動啟動。您的 QA 代理終於在測試它交付的東西。
配套應用：隨時隨地監控你的 Agent
使用 Claude、Codex、Antigravity CLI 或其他 AI 提供商。
把 Bug 和需求直接傳送到您的公開待辦清單。
AgentsRoom 實際執行一瞥。