Agen kamu mengendalikan browser sungguhan.
Bukan yang palsu.
AgentsRoom menanamkan browser Chromium sungguhan di setiap proyek, dan menyertakan server AgentsRoom Browser MCP yang memungkinkan AI agent kamu mengontrolnya. Agen QA kamu membuka site localhost, klik tombol, mengisi form, mengambil screenshot, membaca console, dan memverifikasi fitur benar-benar berfungsi sebelum bilang done. Otomasi browser end-to-end untuk Claude Code, Codex, OpenCode, Gemini CLI, dan Aider, dengan nol konfigurasi Playwright.
Pasangkan dengan Agent Teams: agen Dev men-ship fitur, agen QA memuat site localhost di browser tertanam, menjalankan skenario verifikasi, screenshot hasilnya, dan sign off. Otomasi browser native juga ada di roadmap, dengan server MCP masa depan direncanakan untuk app React Native dan Electron sehingga agen bisa menguji app mobile dan desktop juga.
Demo AgentsRoom Browser MCP: testing web app end-to-end yang digerakkan agen QA Claude Code lewat browser Chromium yang tertanam.
Browser Automation di AgentsRoom adalah dua hal dalam satu. Pertama, browser Chromium sungguhan yang tertanam di setiap project room, dengan URL bar, back/forward, reload, history, screenshot ke clipboard, open-in-default-browser, cookies dan localStorage persisten per proyek. Kedua, server AgentsRoom Browser MCP (agentsroom-browser) yang mengekspos browser itu ke AI agent kamu lewat Model Context Protocol. Agen mendapat antarmuka yang bersih dan bisa di-script: navigate, click, type, screenshot, evaluasi JavaScript, tunggu sebuah element, ambil page state, ambil console log, back, forward, reload.
Kenapa ini penting? Karena seluruh janji AI coding agents berantakan saat agen bilang 'fitur ter-ship' tapi tidak pernah membuka halamannya untuk cek. Kebanyakan agen hari ini mengandalkan menjalankan unit test, lalu berharap. Dengan Browser MCP sungguhan, agen memuat server localhost, mempraktikkan flow user, melihat apa yang akan dilihat user manusia, dan baru kemudian sign off. Role agen QA Engineer akhirnya punya tool yang dia butuhkan untuk QA sungguhan, bukan sekadar analisis statis.
Setup teknisnya tidak terlihat olehmu. Saat kamu mencentang 'Browser access' di sebuah agen, AgentsRoom menggabungkan entry agentsroom-browser ke .mcp.json proyekmu dan agen booting dengan tool browser tersedia. Sebuah jembatan WebSocket yang berjalan di port loopback (127.0.0.1, di-assign OS, dibuat ulang setiap boot, terotentikasi dengan token hex 32 byte) menghubungkan subprocess MCP ke Chromium WebContentsView di app Electron. Setiap klik, ketikan, screenshot adalah panggilan JSON-RPC. Agen melihat browser sungguhan, bukan stub.
Panel Browser AgentsRoom: URL bar, history, screenshot, dan permukaan kontrol MCP penuh untuk AI agent agar bisa navigasi, klik, ketik, dan verifikasi.
Browser sungguhan, bukan stub Playwright
Kebanyakan demo AI agent yang membahas otomasi browser memakai instance Playwright headless yang di-spawn pada setiap panggilan tool. Itu jalan untuk benchmark tapi menyiksa di kehidupan nyata: kamu tidak bisa melihat apa yang dilakukan agen, setiap navigasi men-spawn ulang Chromium, cookies hilang, localStorage kosong, dev server kamu menganggap setiap kunjungan adalah session baru. AgentsRoom mengambil sudut berbeda. Browser sudah terbuka di project room kamu (kamu pakai sendiri, seperti browser normal), dan agen mengendalikan browser itu. Session, cookies, localStorage, status login, semua dipertahankan.
Setiap klik dan ketikan dari agen memicu dispatch native sungguhan lewat WebContentsView Electron, dengan event tombol, event mouse, dan mutasi DOM yang benar. Screenshot adalah PNG sungguhan yang ditangkap dari halaman yang benar-benar di-render (bukan trik DOM-to-image). Console log di-buffer dan bisa di-query, termasuk warning dan error. Agen melihat hal yang sama yang akan kamu lihat kalau DevTools terbuka: performance sungguhan, perilaku network sungguhan, CORS sungguhan, auth sungguhan.
Isolasi cross-room ditegakkan. AgentsRoom membuat satu Chromium WebContentsView per proyek, dengan session partition sendiri (persist:agentsroom-browser-<projectId>). Cookies proyek A tidak pernah bocor ke proyek B. Saat kamu pindah proyek, browser sebelumnya disembunyikan dan yang baru online dengan state-nya sendiri. Agen selalu mendarat di proyek yang benar, dengan kredensial yang benar.
Lapisan MCP sengaja kecil dan bebas dependency. Subprocess browser-mcp-server.cjs berbicara protokol MCP 2024-11-05 lewat stdio (initialize, tools/list, tools/call) dan menerjemahkannya ke panggilan JSON-RPC lewat jembatan WebSocket loopback. Dibandingkan server berbasis SDK yang berat, ini tetap cepat (panggilan tool pertama di bawah 100ms) dan mudah di-debug. Setelah setiap aksi yang mengubah halaman (click, type, navigate, reload, back, forward), respons menyertakan screenshot PNG base64 yang dibatasi 1.6 MB sehingga agen selalu melihat hasil aksinya. Ini ternyata kemenangan keandalan terbesar: agen yang melihat layar melakukan hal yang benar jauh lebih sering daripada agen yang berharap.
Toolkit Browser MCP yang didapat agen kamu
Setiap AI agent dengan akses browser booting dengan tool ini tersedia. Mereka diekspos lewat MCP standar, jadi CLI manapun yang kompatibel melihatnya: Claude Code, Codex CLI, OpenCode, Gemini CLI, Aider.
browser_navigate
Buka URL di browser tertanam. Penanganan URL pintar: localhost:3000 menjadi http://localhost:3000 alih-alih memicu dialog 'cannot open application'. Mengembalikan URL akhir dan screenshot halaman setelah load.
browser_click
Klik sebuah element berdasarkan selector atau teks yang terlihat. Event klik native sungguhan, bukan dispatch JavaScript. Mengembalikan screenshot pasca-klik agar agen melihat hasil aksinya.
browser_type
Ketik teks ke input atau textarea. Mendukung shortcut keyboard dan submit. Event tombol sungguhan, handler onChange halaman dipicu. Mengembalikan screenshot setelah mengetik.
browser_screenshot
Capture viewport saat ini sebagai PNG. Berguna untuk pengecekan regresi visual, QA design, perbandingan before-and-after, atau berbagi state bug ke seluruh tim.
browser_evaluate
Jalankan ekspresi JavaScript di main world halaman. Dapatkan hasil yang ter-serialize. Dipakai agen untuk membaca page state, query DOM, inspeksi store Redux, atau memicu aksi yang tidak punya tombol terlihat.
browser_wait_for
Tunggu sebuah element muncul, URL berubah, request network selesai, atau JavaScript arbitrer mengembalikan true. Menghindari race klasik 'agen klik terlalu cepat'.
browser_get_state
Baca URL saat ini, judul, viewport, posisi scroll, dan snapshot terstruktur dari element halaman yang accessible. Input utama agen saat butuh merencanakan aksi berikutnya.
browser_get_logs
Tarik buffer console (log, warn, error). Agen bisa melihat warning React, hydration error, kegagalan network, dan exception runtime yang sama yang kamu lihat di DevTools. Bug report jadi 'ini error dari console'.
browser_go_back / forward / reload
Navigasi browser standar, bisa di-script. Dipakai agen untuk mundur saat flow bermasalah, atau untuk re-test halaman setelah hot reload dari Vite, Next.js, atau Expo Metro.
Apa yang benar-benar dilakukan agen dengan browser
Workflow nyata yang bisa kamu bangun hari ini, dengan role QA Engineer dan Agent Teams.
Smoke test end-to-end di setiap handoff
Wire tim Dev ke QA. Agen QA navigasi ke dev server localhost kamu, klik melalui jalur kritis (signup, checkout, dashboard), screenshot hasil, dan sign off hanya kalau tidak ada yang throw. Tangkap regresi sebelum manusia membuka halaman.
QA regresi visual
Screenshot before-and-after pada perubahan UI. Agen memuat halaman di commit sebelumnya, screenshot, switch branch, screenshot, minta Claude membandingkan. QA diff visual murah tanpa Percy atau Chromatic dalam loop.
Pemburuan error console
Agen navigasi app, panggil browser_get_logs, menemukan warning hydration React, warning useEffect, 404 network, error CORS, deprecation notice. Melaporkannya sebagai daftar risiko di payload handoff tim, agen Dev berikutnya memperbaikinya.
Testing validasi form
Agen mengisi form dengan data valid, dengan field kosong, dengan edge case (string XSS, input sangat panjang, non-ASCII). Memverifikasi pesan validasi, request network, redirect. QA form sungguhan, bukan unit test.
Audit accessibility
Agen menelusuri halaman, query accessibility tree lewat browser_get_state dan browser_evaluate, mengecek alt text, atribut ARIA, manajemen fokus, navigasi keyboard. Melaporkan masalah dengan screenshot.
QA design terhadap Figma
Gabungkan dengan fitur Figma to AI agents. Agen memuat frame Figma, screenshot, memuat halaman localhost, screenshot, membandingkan spasi, font, warna, alignment. Mengarsipkan daftar ketidaksesuaian.
Verifikasi tunnel preview live
Pasangkan dengan AgentsRoom localhost tunnel. Agen navigasi ke URL HTTPS preview publik (bukan localhost), memverifikasi site bisa diakses dari dunia luar, screenshot, dan mengonfirmasi stakeholder bisa benar-benar membuka link-nya.
Reproduksi bug pelanggan dari tiket backlog publik
Tiket backlog publik masuk dengan URL dan langkah reproduksi. Agen QA membuka URL, mengikuti langkah, menangkap error console, melampirkan screenshot, hand off ke Dev dengan repro yang bersih. Tidak ada lagi loop 'tidak bisa direproduksi'.
Bagaimana agen mendapatkan browser
Buka tab Browser di room kamu
Di project room kamu, panel kanan mengekspos tiga tab: Files, Changes, Browser. Klik Browser. Panel melebar, side bar terlipat, dan tampilan Chromium sungguhan muncul. Ketik URL atau pilih dari history proyek.
Centang 'Browser access' di agen
Buka modal Edit Agent, expand Capabilities, centang Browser access. AgentsRoom menggabungkan entry agentsroom-browser ke .mcp.json proyekmu dan agen akan melihat tool browser pada start berikutnya.
<project>/.mcp.jsonAgen booting dengan browser MCP
Pada spawn agen, Claude (atau Codex, Gemini, dll) menginisialisasi server MCP agentsroom-browser, mendaftar tool-nya (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), dan mulai sekarang bisa mengendalikan browser.
Agen memakai browser
Agen navigasi, klik, mengetik, screenshot, membaca console. Setiap aksi melewati jembatan WebSocket loopback (127.0.0.1, port di-assign OS, token hex 32 byte, dibuat ulang setiap boot app desktop). Setelah setiap aksi yang mengubah halaman, screenshot dikembalikan inline supaya agen secara visual memverifikasi langkahnya.
Auto-target localhost atau tunnel kamu
Kalau tunnel localhost berjalan, navigasi pertama mendarat di URL tunnel. Kalau tidak, dev server pertama yang terdeteksi. Kalau tidak, https://localhost:3000. Dikombinasikan dengan Dev Terminals, agen secara harfiah memulai dev server, lalu membukanya di browser, lalu mengujinya.
Verifikasi, screenshot, handoff
Saat di-wire ke Agent Teams, node QA menjalankan skenarionya, capture screenshot, mengeset flags.qaPassed di payload handoff. Agen berikutnya mewarisi vonisnya. Lolos lanjut ke PM, gagal loop balik ke Dev dengan hint test.
Di balik layar
Untuk yang penasaran. Stack otomasi browser sengaja kecil.
Setiap proyek punya satu Chromium WebContentsView (API Electron modern, bukan BrowserView yang deprecated), di-overlay di window utama dengan bounds yang di-stream dari renderer React. Session partition per proyek menjaga cookies, localStorage, dan otentikasi terisolasi antar proyek. Bounds offscreen default memungkinkan agen memanggil tool browser bahkan sebelum manusia membuka tab Browser, dengan timeout 5 detik pada screenshot untuk menghindari hang.
Server WebSocket ringan (browser-bridge.ts) berjalan di port loopback yang dipilih OS, terikat hanya ke 127.0.0.1. Otentikasi memakai token hex 32 byte yang dibuat ulang setiap boot desktop. File jembatan ~/.agentsroom/browser-bridge.json menyimpan port, token, dan PID saat ini, ditulis ulang secara atomik di setiap boot, sehingga subprocess MCP selalu mengambil kredensial segar dengan retry otomatis.
Server MCP itu sendiri adalah browser-mcp-server.cjs, sebuah skrip Node tanpa dependency yang mengimplementasi protokol MCP 2024-11-05 lewat stdio (initialize, tools/list, tools/call). Ia berbicara JSON-RPC ke jembatan WebSocket lewat klien WebSocket buatan tangan (tanpa ws, tanpa @modelcontextprotocol/sdk). Mungil, cepat, mudah diaudit. Di-bundle sebagai file extraResources di app desktop, sehingga setiap install di-ship siap pakai.
Dukungan browser native (fitur browser kelas satu di luar MCP) ada di roadmap AgentsRoom. Di luar itu, rencana jangka panjang mencakup MCP tambahan agar agen juga bisa mengendalikan target non-web: MCP React Native untuk app mobile dan MCP Electron untuk app desktop. Ide yang sama, UX yang sama: agen tidak hanya menulis code, ia benar-benar mempraktikkan app yang berjalan.
FAQ
Apa bedanya dengan Playwright MCP atau tool browser berbasis Puppeteer?
MCP berbasis Playwright dan Puppeteer men-spawn browser headless baru di setiap session. Itu oke untuk task stateless, tapi kehilangan cookies, localStorage, dan auth antar panggilan, dan manusia tidak bisa melihat apa yang dilakukan agen. AgentsRoom Browser adalah browser yang sama yang dipakai manusia di dalam app, dengan session per-proyek persisten, terlihat oleh user secara real time. Agen mengendalikan window yang bisa kamu lihat dan ambil alih kapan saja. Otomasi browser yang lebih jujur dan lebih mudah di-debug.
Apakah ini jalan dengan semua provider AI, atau hanya Claude Code?
Jalan dengan setiap provider yang didukung AgentsRoom: Claude Code, Codex CLI, OpenCode, Gemini CLI, dan Aider. Tool browser diekspos lewat Model Context Protocol standar, yang dibaca semua CLI ini dari .mcp.json. Agen tidak pernah tahu dirinya ada di AgentsRoom, ia hanya melihat satu set tool MCP dan memakainya seperti memakai tool lain.
Bisakah agen mengendalikan site remote, atau hanya localhost?
Keduanya. Ketik URL apapun dan jalan. Localhost (dan bentuk host:port) di-deteksi pintar, di-prefix http://, dan dibuka langsung. Site publik jalan seperti di browser normal manapun, dengan cookies dan status login dipertahankan per proyek. Dikombinasikan dengan AgentsRoom localhost tunnel, agen juga bisa mengendalikan dev server lokal kamu lewat URL HTTPS publik, yang berguna untuk QA cross-network dan mobile.
Apakah browser MCP aman? Apa yang mencegahnya disalahgunakan?
Jembatan terikat hanya ke 127.0.0.1, tidak pernah ke 0.0.0.0. Port di-assign OS (tidak ada port tetap untuk scanning yang rentan tabrakan). Token hex 32 byte diperlukan di setiap koneksi, dibuat ulang setiap boot desktop. Subprocess MCP menerima kredensial hanya lewat env var, tidak pernah di file ter-commit manapun. Akses browser opt-in per agen di modal Edit Agent. Kalau kamu menghapusnya, entry .mcp.json dihapus dan agen tidak bisa lagi memakai tool.
Apakah agen melihat console browser (error, warning, network)?
Ya, lewat browser_get_logs. Buffer menyimpan pesan console.log, console.warn, dan console.error dari main world halaman. Banyak bug nyata (error hydration React, warning useEffect, kegagalan CORS) hanya muncul di console, tidak pernah di unit test, jadi ini ternyata salah satu tool dengan signal tertinggi untuk agen QA.
Apa yang terjadi pada screenshot yang dikembalikan ke agen? Apakah memakan banyak token?
Setelah setiap aksi yang mengubah halaman, screenshot PNG base64 ditambahkan ke respons tool, dibatasi 1.6 MB. Di atas itu, marker teks dikirim sebagai gantinya. Screenshot krusial untuk keandalan (agen yang melihat layar membuat lebih sedikit kesalahan), jadi trade-off-nya sepadan. Kalau kamu mau mematikan screenshot demi alasan budget, panggilan browser_evaluate biasa hanya mengembalikan teks.
Bisakah agen mengisi form login? Mempertahankan session-nya?
Ya. Cookies dan localStorage dipersist per proyek di bawah session partition persist:agentsroom-browser-<projectId>. Agen bisa login sekali dengan browser_type dan browser_click, dan tetap login sepanjang sisa run. Saat kamu pindah proyek, session berubah, jadi kredensial tidak pernah bocor antar proyek.
Apakah agen akan rusak kalau dev server tidak berjalan?
Ia akan navigasi ke URL dan melihat halaman error Chromium. Ia bisa membaca error itu lewat browser_get_state dan browser_get_logs lalu bereaksi: minta kamu menjalankan server, atau memanggil command Dev Terminals untuk menjalankannya. Dengan Agent Teams dan Dev Terminals, kamu bisa wire workflow yang menjalankan server, menunggu, lalu membuka browser, semua tanpa intervensi manusia.
Apakah app mobile dan desktop juga didukung?
Web sudah ship hari ini, lewat Chromium tertanam dan AgentsRoom Browser MCP. Roadmap mencakup AgentsRoom Browser native sebagai fitur browser kelas satu. Di luar itu, server MCP tambahan direncanakan: MCP React Native agar agen bisa mengendalikan bundle Expo iOS dan Android, dan MCP Electron agar agen bisa mengendalikan app desktop yang bukan web. Logika agen yang sama, diterapkan ke target non-web.
Bisakah manusia menjeda agen dan mengambil alih browser?
Ya. Browser adalah tampilan Chromium yang sama yang dipakai manusia. Kapan saja, klik di panel Browser dan kamu yang mengontrol. Begitu kamu berhenti berinteraksi, agen bisa melanjutkan panggilan tool-nya. Tidak ada konsep 'browser terkunci untuk agen', ini permukaan bersama, persis seperti session pair-programming.
Beri agenmu mata browser sungguhan
Centang Browser access di agen manapun di AgentsRoom. Browser MCP booting otomatis. Agen QA kamu akhirnya menguji apa yang dia ship.
Aplikasi pendamping: pantau agen Anda saat bepergian
Kompatibel dengan Claude, Codex, OpenCode, Gemini CLI, dan Aider
Kirim bug dan permintaan langsung ke backlog publik Anda.