Agent của bạn lái một trình duyệt thực.
Không phải đồ giả.
AgentsRoom nhúng một trình duyệt Chromium thực vào mỗi project, và đi kèm một AgentsRoom Browser MCP server cho phép AI agent điều khiển nó. QA agent của bạn mở site localhost, click button, điền form, chụp screenshot, đọc console, và xác nhận tính năng thực sự chạy được trước khi nói done. Browser automation end-to-end cho Claude Code, Codex, OpenCode, Gemini CLI và Aider, không cần config Playwright.
Ghép với Agent Teams: một Dev agent ship tính năng, một QA agent load site localhost trong browser nhúng, chạy kịch bản verification, screenshot kết quả, và sign off. Browser automation native cũng đã có trong roadmap, với các MCP server tương lai dự kiến cho ứng dụng React Native và Electron để agent cũng có thể test app mobile và desktop.
Demo AgentsRoom Browser MCP: test web app end-to-end do một Claude Code QA agent dẫn dắt qua trình duyệt Chromium nhúng.
Browser Automation trong AgentsRoom là hai thứ trong một. Thứ nhất, một trình duyệt Chromium thực được nhúng trong mỗi project room, có URL bar, back/forward, reload, history, screenshot ra clipboard, mở-trong-trình-duyệt-mặc-định, cookies và localStorage persist theo project. Thứ hai, một AgentsRoom Browser MCP server (agentsroom-browser) expose trình duyệt đó cho AI agent qua Model Context Protocol. Agent có một interface sạch, có thể script: navigate, click, type, screenshot, evaluate JavaScript, đợi element, lấy state trang, lấy console log, back, forward, reload.
Vì sao điều này quan trọng? Bởi cả lời hứa của AI coding agent sụp đổ khi agent nói 'tính năng đã ship' nhưng không bao giờ mở trang để check. Hầu hết agent hôm nay dựa vào việc chạy unit test, rồi hy vọng. Với một browser MCP thực, agent load server localhost, chạy luồng người dùng, thấy thứ mà người dùng thực sẽ thấy, và chỉ khi đó mới sign off. Vai QA Engineer agent cuối cùng có những công cụ nó cần để làm QA thực sự, không chỉ phân tích tĩnh.
Phần setup kỹ thuật vô hình với bạn. Khi bạn tick 'Browser access' trên một agent, AgentsRoom merge entry agentsroom-browser vào .mcp.json của project và agent boot với các tool browser sẵn sàng. Một WebSocket bridge chạy trên loopback port (127.0.0.1, OS gán, regenerate mỗi lần boot, xác thực bằng token hex 32 byte) nối subprocess MCP với Chromium WebContentsView trong app Electron. Mỗi click, mỗi type, mỗi screenshot là một call JSON-RPC. Agent thấy một browser thực, không phải stub.
Panel AgentsRoom Browser: URL bar, history, screenshot, và bề mặt điều khiển MCP đầy đủ để AI agent navigate, click, type và xác nhận.
Một trình duyệt thực, không phải stub Playwright
Hầu hết demo AI agent nói về browser automation đều dùng một instance Playwright headless spawn ra mỗi lần gọi tool. Cách đó chạy cho benchmark nhưng đau đớn trong đời thực: bạn không thấy được agent đang làm gì, mỗi lần navigation lại respawn Chromium, cookie mất, localStorage rỗng, dev server của bạn nghĩ mỗi lần truy cập là session hoàn toàn mới. AgentsRoom đi theo góc khác. Trình duyệt đã mở sẵn trong project room (bạn dùng nó như trình duyệt thường), và agent lái chính trình duyệt đó. Session, cookie, localStorage, trạng thái đăng nhập, tất cả đều giữ.
Mỗi click và type từ agent kích hoạt một dispatch native thực qua WebContentsView của Electron, với key event, mouse event và DOM mutation đúng đắn. Screenshot là PNG thực được chụp từ trang đã render thật (không phải hack DOM-to-image). Console log được buffer và truy vấn được, bao gồm warning và error. Agent thấy đúng những gì bạn sẽ thấy nếu mở DevTools: hiệu năng thực, hành vi network thực, CORS thực, auth thực.
Cô lập giữa các room được áp đặt. AgentsRoom tạo một Chromium WebContentsView cho mỗi project, với session partition riêng (persist:agentsroom-browser-<projectId>). Cookie của project A không bao giờ rò sang project B. Khi bạn chuyển project, browser trước được ẩn và browser mới online với state riêng của nó. Agent luôn đáp đúng project, với credential đúng.
Lớp MCP cố tình giữ nhỏ và không phụ thuộc. Subprocess browser-mcp-server.cjs nói giao thức MCP 2024-11-05 qua stdio (initialize, tools/list, tools/call) và dịch nó thành các call JSON-RPC qua bridge WebSocket loopback. So với một server SDK nặng, cái này giữ được nhanh (call tool đầu dưới 100ms) và dễ debug. Sau mỗi action thay đổi trang (click, type, navigate, reload, back, forward), response gồm một screenshot PNG base64 giới hạn 1.6 MB nên agent luôn thấy kết quả của thứ mình vừa làm. Hóa ra đây là chiến thắng độ tin cậy lớn nhất: agent thấy màn hình làm đúng việc thường xuyên hơn rất nhiều so với agent chỉ hy vọng.
Bộ tool Browser MCP mà agent của bạn nhận được
Mọi AI agent có browser access đều boot với các tool này sẵn sàng. Chúng được expose qua MCP chuẩn, nên mọi CLI tương thích đều thấy: Claude Code, Codex CLI, OpenCode, Gemini CLI, Aider.
browser_navigate
Mở một URL trong browser nhúng. Xử lý URL thông minh: localhost:3000 trở thành http://localhost:3000 thay vì kích hoạt dialog 'không thể mở ứng dụng'. Trả URL cuối cùng và screenshot trang sau khi load.
browser_click
Click một element bằng selector hoặc bằng text hiển thị. Click event native thực, không phải dispatch JavaScript. Trả screenshot sau click để agent thấy kết quả của action.
browser_type
Gõ text vào một input hoặc textarea. Hỗ trợ shortcut bàn phím và submit. Key event thực, handler onChange của trang fire. Trả screenshot sau khi gõ.
browser_screenshot
Capture viewport hiện tại thành PNG. Hữu ích cho visual regression check, design QA, so sánh trước-và-sau, hoặc chia sẻ trạng thái của một bug với phần còn lại của team.
browser_evaluate
Chạy một biểu thức JavaScript trong main world của trang. Lấy về kết quả đã serialize. Được agent dùng để đọc state trang, query DOM, kiểm tra Redux store, hoặc trigger một action không có button hiển thị.
browser_wait_for
Đợi một element xuất hiện, URL đổi, request network kết thúc, hoặc một đoạn JavaScript bất kỳ trả true. Tránh được race kinh điển 'agent click quá nhanh'.
browser_get_state
Đọc URL hiện tại, title, viewport, vị trí scroll, và snapshot có cấu trúc của các element accessible trên trang. Đầu vào chính của agent khi cần lên kế hoạch action kế tiếp.
browser_get_logs
Pull buffer console (log, warn, error). Agent thấy chính những warning React, lỗi hydration, fail network và exception runtime mà bạn sẽ thấy trong DevTools. Bug report trở thành 'đây là error từ console'.
browser_go_back / forward / reload
Điều hướng trình duyệt chuẩn, có thể script. Được agent dùng để backtrack khi flow đi sai, hoặc test lại trang sau hot reload từ Vite, Next.js hay Expo Metro.
Agent thực sự làm gì với trình duyệt
Workflow thực bạn có thể xây hôm nay, với vai QA Engineer và Agent Teams.
Smoke test end-to-end mỗi lần handoff
Nối một team Dev to QA. QA agent navigate đến dev server localhost, click qua các đường tới hạn (signup, checkout, dashboard), screenshot kết quả, và chỉ sign off nếu không có gì throw. Bắt regression trước khi một con người mở trang.
QA visual regression
Screenshot trước-và-sau khi đổi UI. Agent load trang ở commit trước, screenshot, đổi branch, screenshot, nhờ Claude so sánh. QA visual diff giá rẻ, không cần Percy hay Chromatic trong loop.
Săn lỗi console
Agent navigate app, gọi browser_get_logs, tìm warning React hydration, warning useEffect, 404 network, lỗi CORS, thông báo deprecation. Báo cáo dưới dạng danh sách rủi ro trong payload handoff team, Dev agent kế tiếp sửa.
Test validation form
Agent điền form với data hợp lệ, với field rỗng, với edge case (chuỗi XSS, input rất dài, non-ASCII). Xác minh thông báo validation, request network, redirect. QA form thực, không phải unit test.
Audit accessibility
Agent đi qua trang, query cây accessibility qua browser_get_state và browser_evaluate, kiểm alt text, thuộc tính ARIA, quản lý focus, điều hướng bàn phím. Báo cáo issue kèm screenshot.
Design QA so với Figma
Kết hợp với tính năng Figma to AI agent. Agent load frame Figma, screenshot, load trang localhost, screenshot, so sánh khoảng cách, font, màu, alignment. Nộp một danh sách lệch.
Xác minh tunnel preview live
Ghép với tunnel localhost AgentsRoom. Agent navigate đến URL preview HTTPS công khai (không phải localhost), xác minh site truy cập được từ thế giới bên ngoài, screenshot, và xác nhận một stakeholder thực sự có thể mở link.
Tái hiện bug khách hàng từ một ticket public backlog
Một ticket public backlog đến với URL và bước tái hiện. QA agent mở URL, theo các bước, capture lỗi console, đính screenshot, handoff cho Dev với repro sạch. Hết cảnh 'không tái hiện được'.
Cách một agent có được trình duyệt
Mở tab Browser trong room
Trong project room, panel bên phải expose ba tab: Files, Changes, Browser. Click Browser. Panel nới rộng, side bar gập lại, và một view Chromium thực hiện ra. Gõ URL hoặc chọn từ history của project.
Tick 'Browser access' trên agent
Mở modal Edit Agent, mở rộng Capabilities, tick Browser access. AgentsRoom merge entry agentsroom-browser vào .mcp.json của project và agent sẽ thấy các tool browser ở lần start kế tiếp.
<project>/.mcp.jsonAgent boot với browser MCP
Khi spawn agent, Claude (hoặc Codex, Gemini, v.v.) khởi tạo MCP server agentsroom-browser, list các tool của nó (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), và từ giờ có thể lái trình duyệt.
Agent dùng trình duyệt
Agent navigate, click, type, screenshot, đọc console. Mỗi action đi qua một bridge WebSocket loopback (127.0.0.1, port OS gán, token hex 32 byte, regenerate mỗi lần boot app desktop). Sau mỗi action thay đổi trang, một screenshot được trả inline để agent xác minh nước đi của mình bằng mắt.
Auto-target localhost hoặc tunnel của bạn
Nếu một tunnel localhost đang chạy, navigation đầu tiên đáp xuống URL tunnel. Nếu không, dev server đầu tiên được phát hiện. Nếu không, https://localhost:3000. Kết hợp với Dev Terminals, agent thực sự khởi động dev server, rồi mở nó trong browser, rồi test nó.
Xác minh, screenshot, handoff
Khi nối vào Agent Teams, node QA chạy kịch bản của nó, capture screenshot, đặt flags.qaPassed trong payload handoff. Agent kế tiếp thừa kế phán quyết. Pass đi tới PM, fail loop về Dev kèm gợi ý test.
Bên dưới mui xe
Cho người tò mò. Stack browser automation cố tình giữ nhỏ.
Mỗi project có một Chromium WebContentsView (API Electron hiện đại, không phải BrowserView đã deprecate), overlay lên cửa sổ chính ở tọa độ stream từ renderer React. Session partition theo project giữ cookie, localStorage và xác thực cô lập giữa các project. Bounds offscreen mặc định cho phép agent gọi tool browser cả trước khi con người mở tab Browser, với timeout 5 giây trên screenshot để tránh treo.
Một WebSocket server nhẹ (browser-bridge.ts) chạy trên port loopback do OS chọn, chỉ bind vào 127.0.0.1. Xác thực dùng token hex 32 byte regenerate mỗi lần boot desktop. File bridge ~/.agentsroom/browser-bridge.json giữ port, token và PID hiện tại, viết lại atomic mỗi lần boot, nên subprocess MCP luôn lấy được credential mới với auto retry.
Bản thân MCP server là browser-mcp-server.cjs, một script Node zero dependency implement giao thức MCP 2024-11-05 qua stdio (initialize, tools/list, tools/call). Nó nói JSON-RPC với bridge WebSocket qua một WebSocket client tự viết (không ws, không @modelcontextprotocol/sdk). Nhỏ, nhanh, dễ audit. Bundle như extraResources trong app desktop, nên mỗi lần install ship sẵn sàng để chạy.
Hỗ trợ trình duyệt native (một tính năng browser hạng nhất vượt khỏi MCP) đã có trong roadmap AgentsRoom. Vượt qua đó, kế hoạch dài hạn gồm các MCP bổ sung để agent cũng có thể lái target không phải web: một React Native MCP cho app mobile và một Electron MCP cho app desktop. Cùng ý tưởng, cùng UX: agent không chỉ viết code, nó thực sự chạy app đang chạy.
FAQ
Cái này khác Playwright MCP hay tool browser dựa trên Puppeteer thế nào?
MCP dựa trên Playwright và Puppeteer spawn một browser headless mới mỗi session. Ổn cho task stateless, nhưng nó mất cookie, localStorage và auth giữa các call, và con người không thấy được agent đang làm gì. AgentsRoom Browser là chính trình duyệt mà con người dùng bên trong app, với session persist theo project, hiển thị cho người dùng theo thời gian thực. Agent lái một cửa sổ bạn có thể nhìn và override bất kỳ lúc nào. Một browser automation thành thực hơn, dễ debug hơn.
Cái này chạy với mọi nhà cung cấp AI, hay chỉ Claude Code?
Nó chạy với mọi nhà cung cấp AgentsRoom hỗ trợ: Claude Code, Codex CLI, OpenCode, Gemini CLI và Aider. Tool browser được expose qua Model Context Protocol chuẩn mà tất cả các CLI này đều đọc từ .mcp.json. Agent không bao giờ biết nó đang ở trong AgentsRoom, nó chỉ thấy một bộ tool MCP và dùng chúng như dùng bất kỳ tool nào khác.
Agent có thể lái site remote không, hay chỉ localhost?
Cả hai. Gõ URL bất kỳ rồi go. Localhost (và dạng host:port) được smart-detect, prefix bằng http://, và mở thẳng. Site công khai chạy như trong trình duyệt thường, với cookie và trạng thái đăng nhập preserve theo project. Kết hợp với tunnel localhost AgentsRoom, agent còn lái được dev server local của bạn qua một URL HTTPS công khai, hữu ích cho QA cross-network và mobile.
Browser MCP có an toàn không? Cái gì ngăn nó bị lạm dụng?
Bridge chỉ bind vào 127.0.0.1, không bao giờ vào 0.0.0.0. Port do OS gán (không có port cố định dễ bị quét). Token hex 32 byte là bắt buộc cho mọi connection, regenerate mỗi lần boot desktop. Subprocess MCP nhận credential chỉ qua env var, không bao giờ trong file commit. Browser access opt-in theo agent trong modal Edit Agent. Nếu bạn bỏ, entry .mcp.json bị xóa và agent không còn dùng được tool nữa.
Agent có thấy console trình duyệt (lỗi, warning, network) không?
Có, qua browser_get_logs. Buffer giữ message console.log, console.warn và console.error từ main world của trang. Nhiều bug thực (lỗi hydration React, warning useEffect, fail CORS) chỉ nổi lên ở console, chưa bao giờ trong unit test, nên đây hóa ra là một trong các tool có tín hiệu cao nhất cho QA agent.
Screenshot trả về cho agent xử lý sao? Có tốn nhiều token không?
Sau mỗi action thay đổi trang, một screenshot PNG base64 được append vào response của tool, giới hạn 1.6 MB. Trên mức đó, một text marker được gửi thay. Screenshot là tới hạn cho độ tin cậy (agent thấy màn hình mắc ít sai sót hơn nhiều), nên đánh đổi xứng đáng. Nếu bạn muốn tắt screenshot vì lý do ngân sách, các call browser_evaluate thuần chỉ trả text.
Agent có thể điền form đăng nhập không? Persist session của nó không?
Có. Cookie và localStorage persist theo project dưới session partition persist:agentsroom-browser-<projectId>. Agent có thể đăng nhập một lần với browser_type và browser_click, và giữ trạng thái đăng nhập suốt phần còn lại của run. Khi bạn chuyển project, session đổi, nên credential không bao giờ rò giữa các project.
Agent có vỡ nếu dev server không chạy không?
Nó sẽ navigate đến URL và thấy trang lỗi Chromium. Nó có thể đọc lỗi đó qua browser_get_state và browser_get_logs và phản ứng phù hợp: nhờ bạn khởi server, hoặc gọi một command Dev Terminals để khởi. Với Agent Teams và Dev Terminals, bạn có thể nối một workflow khởi server, đợi, rồi mở browser, tất cả không cần can thiệp con người.
App mobile và desktop có được hỗ trợ không?
Web đang ship hôm nay, qua Chromium nhúng và AgentsRoom Browser MCP. Roadmap gồm AgentsRoom Browser native như một tính năng browser hạng nhất. Vượt qua đó, các MCP server bổ sung đã được lên kế hoạch: một React Native MCP để agent có thể lái bundle Expo iOS và Android, và một Electron MCP để agent có thể lái app desktop không phải web. Cùng logic agent, áp dụng cho target không phải web.
Con người có thể tạm dừng agent và tiếp quản trình duyệt không?
Có. Trình duyệt là chính view Chromium con người dùng. Bất kỳ lúc nào, click trong panel Browser và bạn nắm quyền. Khi bạn ngừng tương tác, agent có thể tiếp tục các call tool của nó. Không có khái niệm 'browser bị khóa cho agent', đó là một bề mặt dùng chung, đúng kiểu một session pair-programming.
Cho agent của bạn đôi mắt browser thực sự
Tick Browser access trên bất kỳ agent nào trong AgentsRoom. Browser MCP boot tự động. QA agent của bạn cuối cùng đang test thứ nó ship.
Ứng dụng đồng hành: theo dõi agent khi đi đường
Hoạt động với Claude, Codex, OpenCode, Gemini CLI và Aider
Gửi lỗi và yêu cầu thẳng vào backlog công khai của bạn.