Ajanların gerçek bir tarayıcı sürer.
Sahte değil.
AgentsRoom her projeye gerçek bir Chromium tarayıcı gömer ve AI ajanlarının onu kontrol etmesine izin veren bir AgentsRoom Browser MCP sunucusu sunar. QA ajanın localhost sitende açar, butonlara tıklar, formları doldurur, ekran görüntüsü alır, konsolu okur ve done demeden önce feature'ın gerçekten çalıştığını doğrular. Claude Code, Codex, OpenCode, Gemini CLI ve Aider için sıfır Playwright config ile uçtan uca browser automation.
Agent Teams ile eşle: bir Dev ajan feature'ı çıkarır, bir QA ajan localhost sitesini gömülü tarayıcıya yükler, doğrulama senaryosunu çalıştırır, sonucun ekran görüntüsünü alır ve imzalar. Native browser automation da roadmap'te, ajanların mobil ve desktop uygulamaları da test edebilmesi için gelecekte React Native ve Electron uygulamaları için MCP sunucuları planlanıyor.
AgentsRoom Browser MCP demosu: gömülü Chromium tarayıcısı üzerinden bir Claude Code QA ajanı tarafından sürülen uçtan uca web uygulaması testi.
AgentsRoom'da Browser Automation tek bir şeyde iki şeydir. İlki, URL barı, back/forward, reload, history, panoya ekran görüntüsü, open-in-default-browser, projeye göre kalıcı cookies ve localStorage ile her proje odasında gömülü gerçek bir Chromium tarayıcı. İkincisi, bu tarayıcıyı Model Context Protocol üzerinden AI ajanlarına ifşa eden bir AgentsRoom Browser MCP sunucusu (agentsroom-browser). Ajan temiz, scriptable bir arayüz alır: navigate, click, type, screenshot, JavaScript değerlendir, bir element için bekle, sayfa durumunu al, konsol loglarını al, geri git, ileri git, reload.
Bu neden önemli? Çünkü ajan 'feature shipped' deyip de kontrol etmek için sayfayı asla açmadığında AI kodlama ajanlarının tüm vaadi dağılır. Bugünkü ajanların çoğu unit testleri çalıştırmaya güvenir, sonra umarlar. Gerçek bir browser MCP ile ajan localhost sunucusunu yükler, kullanıcı flow'unu çalıştırır, insan kullanıcının göreceği şeyi görür ve ancak o zaman imzalar. QA Engineer ajan rolü sonunda gerçek QA yapmak için ihtiyacı olan araçlara sahip, sadece statik analiz değil.
Teknik kurulum senin için görünmezdir. Bir ajan üzerinde 'Browser access' işaretlediğinde, AgentsRoom agentsroom-browser girişini projenin .mcp.json'una merge eder ve ajan tarayıcı araçları kullanılabilir şekilde başlar. Bir loopback portunda (127.0.0.1, OS tarafından atanan, her boot'ta yeniden üretilen, 32-byte hex token ile authentication yapan) çalışan bir WebSocket köprüsü, MCP subprocess'i Electron uygulamasındaki Chromium WebContentsView'a bağlar. Her tıklama, her yazma, her ekran görüntüsü bir JSON-RPC çağrısıdır. Ajan gerçek bir tarayıcı görür, bir stub değil.
AgentsRoom Browser paneli: URL barı, history, ekran görüntüsü ve AI ajanlarının gezinmesi, tıklaması, yazması ve doğrulaması için tam MCP kontrol yüzeyi.
Gerçek bir tarayıcı, Playwright stub değil
Browser automation hakkında konuşan AI ajan demolarının çoğu, her tool çağrısında spawn olan bir headless Playwright instance'ı kullanır. Bu benchmark'lar için işe yarar ama gerçek hayatta acı vericidir: ajanın ne yaptığını göremezsin, her navigation Chromium'u yeniden spawn eder, cookies kaybolur, localStorage boştur, dev server her ziyaretin yepyeni bir oturum olduğunu düşünür. AgentsRoom farklı bir açı alır. Tarayıcı zaten projendeki odada açıktır (kendin de kullanırsın, normal bir tarayıcı gibi) ve ajan bu tarayıcıyı sürer. Oturumlar, cookies, localStorage, login durumu, hepsi korunur.
Ajandan her tıklama ve yazma, uygun key event'leri, mouse event'leri ve DOM mutasyonları ile Electron'un WebContentsView'ı üzerinden gerçek bir native dispatch tetikler. Ekran görüntüleri gerçekten render edilen sayfadan yakalanan gerçek PNG'lerdir (DOM-to-image hack'i değil). Konsol logları buffer'lanır ve queryable'dır, uyarılar ve hatalar dahil. Ajan, DevTools açıkken göreceğin aynı şeyi görür: gerçek performans, gerçek network davranışı, gerçek CORS, gerçek auth.
Cross-room izolasyon zorunludur. AgentsRoom her proje için kendi session partition'ı (persist:agentsroom-browser-<projectId>) ile bir Chromium WebContentsView oluşturur. Proje A'nın cookie'leri asla proje B'ye sızmaz. Proje değiştirdiğinde, önceki tarayıcı gizlenir ve yenisi kendi durumu ile online'a gelir. Ajan her zaman doğru projede, doğru kimlik bilgileri ile iner.
MCP katmanı kasıtlı olarak küçük ve bağımlılıksızdır. browser-mcp-server.cjs subprocess'i stdio üzerinden MCP 2024-11-05 protokolünü konuşur (initialize, tools/list, tools/call) ve onu loopback WebSocket köprüsü üzerinden JSON-RPC çağrılarına çevirir. Ağır SDK tabanlı bir sunucuya kıyasla hızlı kalır (ilk tool çağrısı 100ms altında) ve debug etmesi kolaydır. Sayfayı değiştiren her eylemden sonra (click, type, navigate, reload, back, forward), yanıt 1.6 MB ile sınırlı bir base64 PNG ekran görüntüsü içerir, böylece ajan az önce yaptığının sonucunu her zaman görür. Bu, en büyük tek güvenilirlik kazancı oldu: ekranı gören ajanlar, umut eden ajanlardan çok daha sık doğru şeyi yapar.
Ajanlarının aldığı Browser MCP toolkit'i
Tarayıcı erişimi olan her AI ajan bu araçlar kullanılabilir şekilde başlar. Standart MCP üzerinden ifşa edilirler, böylece uyumlu herhangi bir CLI onları görür: Claude Code, Codex CLI, OpenCode, Gemini CLI, Aider.
browser_navigate
Gömülü tarayıcıda bir URL aç. Akıllı URL handling: localhost:3000, 'cannot open application' diyaloğunu tetiklemek yerine http://localhost:3000 olur. Yükleme sonrası son URL'yi ve sayfanın ekran görüntüsünü döndürür.
browser_click
Bir elemana selektör veya görünür metin ile tıkla. Gerçek native click event, JavaScript dispatch değil. Ajanın eyleminin sonucunu görmesi için tıklama sonrası ekran görüntüsünü döndürür.
browser_type
Bir input veya textarea'ya metin yaz. Klavye kısayollarını ve submit'i destekler. Gerçek key event'ler, sayfanın onChange handler'ları çalışır. Yazma sonrası ekran görüntüsünü döndürür.
browser_screenshot
Mevcut viewport'u PNG olarak yakala. Görsel regresyon kontrolleri, design QA, before-and-after karşılaştırmaları veya bir bug'ın durumunu ekibin geri kalanıyla paylaşmak için kullanışlıdır.
browser_evaluate
Sayfanın main world'ünde bir JavaScript ifadesi çalıştır. Serileştirilmiş sonucu geri al. Ajanlar tarafından sayfa durumunu okumak, DOM'u sorgulamak, bir Redux store'unu denetlemek veya görünür düğmesi olmayan bir eylemi tetiklemek için kullanılır.
browser_wait_for
Bir elemanın görünmesini, URL'nin değişmesini, bir network isteğinin bitmesini veya keyfi JavaScript'in true döndürmesini bekle. Klasik 'ajan çok hızlı tıklıyor' yarışını önler.
browser_get_state
Mevcut URL'yi, başlığı, viewport'u, scroll pozisyonunu ve sayfanın erişilebilir elemanlarının yapılandırılmış bir snapshot'ını oku. Ajanın bir sonraki eylemini planlaması gerektiğinde birincil input'u.
browser_get_logs
Konsol buffer'ını çek (log, warn, error). Ajan, DevTools'ta göreceğin aynı React uyarılarını, hydration hatalarını, network başarısızlıklarını ve runtime exception'ları görebilir. Bug raporları 'işte konsoldaki hata' olur.
browser_go_back / forward / reload
Standart tarayıcı navigation, scriptable. Bir flow yanlış gittiğinde geri çekilmek veya Vite, Next.js veya Expo Metro'dan bir hot reload sonrası bir sayfayı yeniden test etmek için ajanlar tarafından kullanılır.
Ajanlar tarayıcıyla gerçekten ne yapıyor
QA Engineer rolü ve Agent Teams ile bugün inşa edebileceğin gerçek workflow'lar.
Her handoff'ta uçtan uca smoke test
Bir Dev'den QA'ya ekibi bağla. QA ajanı localhost dev sunucuna gezinir, kritik yollarda (signup, checkout, dashboard) tıklar, sonucun ekran görüntüsünü alır ve sadece hiçbir şey throw etmiyorsa imzalar. Bir insan sayfayı açmadan önce regresyonları yakala.
Görsel regresyon QA
UI değişikliklerinde before-and-after ekran görüntüleri. Ajan sayfayı önceki commit'e yükler, ekran görüntüsü, branch değiştirir, ekran görüntüsü, Claude'dan karşılaştırmasını ister. Loop'ta Percy veya Chromatic olmadan ucuz görsel diff QA.
Konsol hata avı
Ajan uygulamada gezinir, browser_get_logs çağırır, React hydration uyarıları, useEffect uyarıları, network 404'leri, CORS hataları, deprecation notice'ları bulur. Bunları ekip handoff payload'unda risk listesi olarak rapor eder, sonraki Dev ajan onları düzeltir.
Form doğrulama testi
Ajan formu geçerli verilerle, boş alanlarla, edge case'lerle (XSS string'leri, çok uzun input'lar, ASCII olmayan) doldurur. Doğrulama mesajlarını, network isteklerini, yönlendirmeleri doğrular. Gerçek form QA, unit testler değil.
Accessibility denetimi
Ajan sayfada gezinir, browser_get_state ve browser_evaluate üzerinden accessibility tree'yi sorgular, alt text'leri, ARIA niteliklerini, focus yönetimini, klavye navigation'ını kontrol eder. Sorunları ekran görüntüleri ile rapor eder.
Figma'ya karşı design QA
Figma to AI agents feature'ı ile birleştir. Ajan Figma frame'ini yükler, ekran görüntüsü, localhost sayfasını yükler, ekran görüntüsü, spacing'leri, fontları, renkleri, alignment'ları karşılaştırır. Uyumsuzluk listesi açar.
Canlı önizleme tüneli doğrulaması
AgentsRoom localhost tüneli ile eşle. Ajan public HTTPS önizleme URL'sine (localhost değil) gezinir, sitenin dış dünyadan erişilebilir olduğunu doğrular, ekran görüntüsü alır ve bir paydaşın gerçekten linki açabileceğini onaylar.
Public backlog ticketinden bir müşteri bug'ını tekrarla
Public backlog ticketi bir URL ve tekrarlama adımları ile gelir. QA ajanı URL'yi açar, adımları takip eder, konsol hatasını yakalar, ekran görüntüsünü ekler, temiz bir repro ile Dev'e handoff yapar. Daha fazla 'cannot reproduce' loop'u yok.
Bir ajan nasıl tarayıcı alır
Odanda Browser sekmesini aç
Proje odanda, sağ panel üç sekme sunar: Files, Changes, Browser. Browser'a tıkla. Panel genişler, yan bar daralır ve gerçek bir Chromium görünümü belirir. Bir URL yaz veya proje geçmişinden seç.
Ajanda 'Browser access'i işaretle
Edit Agent modalını aç, Capabilities'i genişlet, Browser access'i işaretle. AgentsRoom agentsroom-browser girişini projenin .mcp.json'una merge eder ve ajan bir sonraki başlatmada tarayıcı araçlarını görecektir.
<project>/.mcp.jsonAjan browser MCP ile başlar
Ajan spawn'ında, Claude (veya Codex, Gemini vb.) agentsroom-browser MCP sunucusunu başlatır, araçlarını listeler (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) ve bundan sonra tarayıcıyı sürebilir.
Ajan tarayıcıyı kullanır
Ajan gezinir, tıklar, yazar, ekran görüntüsü alır, konsolu okur. Her eylem bir loopback WebSocket köprüsü üzerinden gider (127.0.0.1, OS tarafından atanan port, 32-byte hex token, desktop uygulamasının her boot'unda yeniden üretilir). Sayfayı değiştiren her eylemden sonra, bir ekran görüntüsü inline döndürülür, böylece ajan hareketini görsel olarak doğrular.
Localhost veya tüneline auto-target
Bir localhost tüneli çalışıyorsa, ilk navigation tünel URL'sine iner. Aksi takdirde, ilk tespit edilen dev sunucu. Aksi takdirde, https://localhost:3000. Dev Terminals ile birleştirildiğinde, ajan kelimenin tam anlamıyla dev sunucusunu başlatır, sonra tarayıcıda açar, sonra test eder.
Doğrula, ekran görüntüsü al, handoff yap
Agent Teams'e bağlandığında, QA düğümü senaryolarını çalıştırır, ekran görüntüleri yakalar, handoff payload'unda flags.qaPassed'ı ayarlar. Sonraki ajan kararı miras alır. Pass PM'e gider, fail test ipuçları ile Dev'e geri döner.
Kaputun altında
Meraklılar için. Browser automation stack'i kasıtlı olarak küçüktür.
Her projenin bir Chromium WebContentsView'ı vardır (modern Electron API, deprecated BrowserView değil), React renderer'dan stream edilen bounds'ta ana pencerenin üzerine bindirilmiş. Proje başına session partition cookies, localStorage ve authentication'ı projeler arasında izole tutar. Default offscreen bounds, ajanların insan Browser sekmesini açmadan önce bile tarayıcı araçlarını çağırmasına izin verir, ekran görüntülerinde takılmaları önlemek için 5 saniyelik timeout ile.
Hafif bir WebSocket sunucusu (browser-bridge.ts) OS tarafından seçilen, sadece 127.0.0.1'e bağlı bir loopback portunda çalışır. Authentication her desktop boot'unda yeniden üretilen 32-byte hex token kullanır. Köprü dosyası ~/.agentsroom/browser-bridge.json mevcut port, token ve PID'yi tutar, her boot'ta atomik olarak yeniden yazılır, böylece MCP subprocess otomatik retry ile her zaman taze kimlik bilgilerini alır.
MCP sunucusunun kendisi browser-mcp-server.cjs'dir, stdio üzerinden MCP 2024-11-05 protokolünü uygulayan sıfır bağımlılıklı bir Node script'idir (initialize, tools/list, tools/call). El yapımı bir WebSocket istemcisi üzerinden WebSocket köprüsüne JSON-RPC konuşur (ws yok, @modelcontextprotocol/sdk yok). Küçük, hızlı, denetlenmesi kolay. Desktop uygulamasında extraResources dosyası olarak paketlenmiş, böylece her kurulum onu kullanıma hazır olarak getirir.
Native browser desteği (MCP'nin ötesinde first-class bir tarayıcı feature'ı) AgentsRoom roadmap'inde. Bunun ötesinde, uzun vadeli plan ajanların web olmayan hedefleri de sürebilmesi için ek MCP'ler içerir: mobil uygulamalar için bir React Native MCP ve desktop uygulamalar için bir Electron MCP. Aynı fikir, aynı UX: ajan sadece kod yazmaz, çalışan uygulamayı gerçekten çalıştırır.
FAQ
Bu Playwright MCP veya Puppeteer tabanlı tarayıcı araçlarından nasıl farklı?
Playwright ve Puppeteer tabanlı MCP'ler her oturumda taze bir headless tarayıcı spawn'lar. Bu stateless görevler için iyidir, ancak çağrılar arasında cookies, localStorage ve auth'u kaybeder ve insan ajanın ne yaptığını göremez. AgentsRoom Browser, insanın uygulama içinde kullandığı aynı tarayıcıdır, proje başına kalıcı oturum ile, kullanıcıya gerçek zamanlı görünür. Ajan görebileceğin ve istediğin an müdahale edebileceğin bir pencereyi sürer. Daha dürüst, daha debug edilebilir bir browser automation.
Bu tüm AI sağlayıcılarıyla çalışıyor mu, yoksa sadece Claude Code ile mi?
AgentsRoom'un desteklediği her sağlayıcı ile çalışır: Claude Code, Codex CLI, OpenCode, Gemini CLI ve Aider. Tarayıcı araçları, tüm bu CLI'ların .mcp.json'dan okuduğu standart Model Context Protocol üzerinden ifşa edilir. Ajan AgentsRoom'da olduğunu asla bilmez, sadece bir MCP araç seti görür ve onları başka bir aracı kullanır gibi kullanır.
Ajan uzak bir siteyi sürebilir mi yoksa sadece localhost mu?
İkisi de. Herhangi bir URL yaz ve git. Localhost (ve host:port formları) akıllıca tespit edilir, http:// ile öneklenir ve doğrudan açılır. Public siteler herhangi bir normal tarayıcıdaki gibi çalışır, cookies ve login durumu projeye göre korunur. AgentsRoom localhost tüneli ile birleştirildiğinde, ajan yerel dev sunucunu da public bir HTTPS URL üzerinden sürebilir, bu cross-network ve mobil QA için kullanışlıdır.
Browser MCP güvenli mi? Suistimal edilmesini ne engelliyor?
Köprü sadece 127.0.0.1'e bağlanır, asla 0.0.0.0'a değil. Port OS tarafından atanır (collision-prone tarama için sabit port yok). Her bağlantıda, her desktop boot'unda yeniden üretilen 32-byte hex token gereklidir. MCP subprocess kimlik bilgilerini sadece env var'lar üzerinden alır, asla commit'lenmiş bir dosyada değil. Browser access, Edit Agent modalında ajan başına opt-in'dir. Onu kaldırırsan, .mcp.json girişi kaldırılır ve ajan artık araçları kullanamaz.
Ajan tarayıcı konsolunu görüyor mu (hatalar, uyarılar, network)?
Evet, browser_get_logs üzerinden. Buffer sayfanın main world'undan console.log, console.warn ve console.error mesajlarını tutar. Birçok gerçek bug (React hydration hataları, useEffect uyarıları, CORS başarısızlıkları) sadece konsolda yüzeye çıkar, asla unit testlerde değil, bu yüzden bu QA ajanı için en yüksek sinyalli araçlardan biri olur.
Ajana döndürülen ekran görüntülerine ne oluyor? Çok token mu maliyetli?
Sayfayı değiştiren her eylemden sonra, tool yanıtına 1.6 MB ile sınırlı bir base64 PNG ekran görüntüsü eklenir. Bunun üzerinde, bir text marker gönderilir. Ekran görüntüleri güvenilirlik için kritiktir (ekranı gören bir ajan çok daha az hata yapar), bu yüzden trade-off'a değer. Bütçe nedenleriyle ekran görüntülerini devre dışı bırakmak istersen, düz browser_evaluate çağrıları sadece metin döndürür.
Ajan bir login formunu doldurabilir mi? Oturumunu persist edebilir mi?
Evet. Cookies ve localStorage persist:agentsroom-browser-<projectId> session partition'ı altında proje başına persist edilir. Ajan browser_type ve browser_click ile bir kez login olabilir ve run'ın geri kalanı boyunca login kalabilir. Proje değiştirdiğinde, oturum değişir, böylece kimlik bilgileri asla projeler arasında sızmaz.
Dev sunucu çalışmıyorsa ajan kırılır mı?
URL'ye gezinir ve bir Chromium hata sayfası görür. Bu hatayı browser_get_state ve browser_get_logs üzerinden okuyabilir ve buna göre tepki verebilir: senden sunucuyu başlatmanı istemek veya başlatmak için bir Dev Terminals komutu çağırmak. Agent Teams ve Dev Terminals ile, sunucuyu başlatan, bekleyen, sonra tarayıcıyı açan bir workflow bağlayabilirsin, hepsi insan müdahalesi olmadan.
Mobil uygulamalar ve desktop uygulamalar da destekleniyor mu?
Web bugün çıkıyor, gömülü Chromium ve AgentsRoom Browser MCP üzerinden. Roadmap first-class bir tarayıcı feature'ı olarak native bir AgentsRoom Browser içerir. Bunun ötesinde, ek MCP sunucuları planlanıyor: ajanların iOS ve Android Expo bundle'larını sürebilmesi için bir React Native MCP ve ajanların web olmayan desktop uygulamaları sürebilmesi için bir Electron MCP. Aynı ajan mantığı, web olmayan hedeflere uygulanmış.
İnsan ajanı duraklatabilir ve tarayıcıyı devralabilir mi?
Evet. Tarayıcı insanın kullandığı aynı Chromium görünümüdür. Herhangi bir anda, Browser panelinde tıkla ve kontrol sende. Etkileşimi durdurduğunda, ajan tool çağrılarına devam edebilir. 'Agent-locked browser' kavramı yoktur, paylaşılan bir yüzeydir, tıpkı bir pair-programming oturumu gibi.
Ajanlarına gerçek tarayıcı gözleri ver
AgentsRoom'da herhangi bir ajan üzerinde Browser access'i işaretle. Browser MCP otomatik olarak başlar. QA ajanın sonunda çıkardığını test eder.
Yardımcı uygulama: hareket halindeyken ajanlarinizi izleyin
Claude, Codex, OpenCode, Gemini CLI ve Aider ile calisir
Hataları ve istekleri doğrudan genel backlogunuza gönderin.