Ваші агенти керують реальним браузером.
Не фейковим.
AgentsRoom вбудовує справжній браузер Chromium у кожен проект і постачає сервер AgentsRoom Browser MCP, який дозволяє вашим AI агентам керувати ним. Ваш агент QA відкриває ваш сайт localhost, натискає кнопки, заповнює форми, робить скріншоти, читає консоль і перевіряє, чи функція дійсно працює, перш ніж сказати, що все готово. End-to-end автоматизація браузера для Claude Code, Codex, OpenCode, Antigravity CLI, Aider, Grok Build, Mistral Vibe та Kimi Code, без налаштування Playwright.
Поєднайте це з командами агентів: агент розробки відправляє функцію, агент QA завантажує сайт localhost у вбудованому браузері, запускає сценарій перевірки, робить скріншот результату та підписує. Нативна автоматизація браузера також запланована в дорожній карті, з майбутніми серверами MCP, запланованими для додатків React Native та Electron, щоб агенти могли тестувати мобільні та настільні додатки.
Демонстрація AgentsRoom Browser MCP: end-to-end тестування веб-додатків, кероване агентом Claude Code QA через вбудований браузер Chromium.
Автоматизація браузера в AgentsRoom - це дві речі в одному. По-перше, справжній браузер Chromium, вбудований у кожну кімнату проекту, з адресним рядком, кнопками назад/вперед, перезавантаженням, історією, зніманням скріншотів у буфер обміну, відкриттям у браузері за замовчуванням, постійними кукі та localStorage для кожного проекту. По-друге, сервер AgentsRoom Browser MCP (agentsroom-browser), який відкриває цей браузер для ваших AI агентів через Model Context Protocol. Агент отримує чистий, скриптований інтерфейс: навігація, кліки, введення тексту, знімання скріншотів, оцінка JavaScript, очікування елемента, отримання стану сторінки, отримання журналів консолі, повернення назад, вперед, перезавантаження.
Чому це важливо? Тому що вся обіцянка AI агентів програмування розвалюється, коли агент каже 'функція відправлена', але ніколи не відкриває сторінку для перевірки. Більшість агентів сьогодні покладаються на запуск юніт-тестів, а потім сподіваються. З реальним браузером MCP агент завантажує сервер localhost, виконує користувацький потік, бачить те, що побачив би людський користувач, і тільки тоді підписує. Роль агента QA Engineer нарешті має інструменти, необхідні для реального QA, а не лише статичного аналізу.
Технічна установка невидима для вас. Коли ви відзначаєте 'Доступ до браузера' на агенті, AgentsRoom об'єднує запис agentsroom-browser у .mcp.json вашого проекту, і агент завантажується з доступними інструментами браузера. Міст WebSocket, що працює на порту loopback (127.0.0.1, призначений ОС, регенерується при кожному завантаженні, аутентифікований 32-байтовим hex токеном), з'єднує підпроцес MCP з Chromium WebContentsView у додатку Electron. Кожен клік, кожне введення, кожен скріншот - це виклик JSON-RPC. Агент бачить реальний браузер, а не заглушку.
Панель браузера AgentsRoom: адресний рядок, історія, знімання скріншотів і повна поверхня управління MCP для AI агентів для навігації, кліків, введення тексту та перевірки.
Справжній браузер, а не заглушка Playwright
Більшість демонстрацій AI агентів, які говорять про автоматизацію браузера, використовують безголовий екземпляр Playwright, що запускається при кожному виклику інструменту. Це працює для бенчмарків, але це болісно в реальному житті: ви не можете бачити, що робить агент, кожна навігація перезапускає Chromium, кукі втрачаються, localStorage порожній, ваш dev сервер вважає кожен візит новою сесією. AgentsRoom підходить з іншого боку. Браузер вже відкритий у вашій кімнаті проекту (ви використовуєте його самі, як звичайний браузер), і агент керує цим браузером. Сесії, кукі, localStorage, стан входу - все зберігається.
Кожен клік і введення від агента викликає справжню нативну відправку через WebContentsView Electron, з правильними подіями клавіш, подіями миші та мутаціями DOM. Скріншоти - це справжні PNG, захоплені з фактично відображеної сторінки (не хак DOM-to-image). Журнали консолі буферизуються і доступні для запиту, включаючи попередження та помилки. Агент бачить те ж саме, що побачили б ви, якби відкрили DevTools: реальну продуктивність, реальну поведінку мережі, реальний CORS, реальну аутентифікацію.
Ізоляція між кімнатами забезпечується. AgentsRoom створює один Chromium WebContentsView на проект, з власним розділом сесії (persist:agentsroom-browser-<projectId>). Кукі проекту A ніколи не потрапляють у проект B. Коли ви переключаєте проект, попередній браузер приховується, а новий виходить в онлайн з власним станом. Агент завжди потрапляє на правильний проект з правильними обліковими даними.
Шар MCP навмисно малий і без залежностей. Підпроцес browser-mcp-server.cjs говорить протоколом MCP 2024-11-05 через stdio (initialize, tools/list, tools/call) і перетворює його у виклики JSON-RPC через міст WebSocket loopback. Порівняно з важким сервером на основі SDK, це залишається швидким (перший виклик інструменту - менше 100 мс) і легким для налагодження. Після кожної дії, що змінює сторінку (клік, введення, навігація, перезавантаження, назад, вперед), відповідь включає скріншот у форматі base64 PNG, обмежений 1,6 МБ, щоб агент завжди бачив результат того, що він щойно зробив. Це виявилося найбільшим виграшем у надійності: агенти, які бачать екран, набагато частіше роблять правильні речі, ніж агенти, які сподіваються.
Інструментарій 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
Введіть текст у поле введення або текстову область. Підтримує комбінації клавіш і відправку. Реальні події клавіш, спрацьовують обробники onChange сторінки. Повертає скріншот після введення.
browser_screenshot
Захоплення поточного вікна перегляду у форматі PNG. Корисно для перевірки візуальних регресій, дизайну QA, порівняння до і після, або для обміну станом помилки з рештою команди.
browser_evaluate
Запуск виразу JavaScript у головному світі сторінки. Повертає серіалізований результат. Використовується агентами для читання стану сторінки, запитів до DOM, перевірки сховища Redux або запуску дії, яка не має видимої кнопки.
browser_wait_for
Очікування появи елемента, зміни URL, завершення мережевого запиту або повернення true довільним JavaScript. Уникає класичної гонки 'агент клікає занадто швидко'.
browser_get_state
Читання поточного URL, заголовка, вікна перегляду, позиції прокрутки та структурованого знімка доступних елементів сторінки. Основний вхід агента, коли йому потрібно спланувати наступну дію.
browser_get_logs
Отримання буфера консолі (log, warn, error). Агент може бачити ті ж попередження React, помилки гідратації, збої мережі та винятки під час виконання, які ви бачите в DevTools. Звіти про помилки стають 'ось помилка з консолі'.
browser_go_back / forward / reload
Стандартна навігація браузера, що піддається скриптуванню. Використовується агентами для повернення назад, коли потік йде неправильно, або для повторного тестування сторінки після гарячого перезавантаження з Vite, Next.js або Expo Metro.
Що агенти насправді роблять з браузером
Реальні робочі процеси, які ви можете створити сьогодні, з роллю QA Engineer і командами агентів.
Кінцевий тест на кожній передачі
З'єднайте команду Dev з QA. Агент QA переходить на ваш локальний dev-сервер, проходить критичні шляхи (реєстрація, оформлення замовлення, панель управління), робить скріншоти результату і підписується тільки якщо нічого не викликає помилок. Виявляйте регресії до того, як людина відкриє сторінку.
Візуальна регресія QA
Скріншоти до і після змін в інтерфейсі. Агент завантажує сторінку на попередньому коміті, робить скріншоти, переключає гілку, робить скріншоти, просить Claude порівняти. Дешеве візуальне порівняння QA без Percy або Chromatic у циклі.
Полювання на помилки консолі
Агент переходить по додатку, викликає browser_get_logs, знаходить попередження гідратації React, попередження useEffect, мережеві 404, помилки CORS, повідомлення про застарілість. Звітує про них як про список ризиків у пакеті передачі команди, наступний агент Dev виправляє їх.
Тестування валідації форм
Агент заповнює форму дійсними даними, порожніми полями, крайніми випадками (рядки XSS, дуже довгі введення, не-ASCII). Перевіряє повідомлення про валідацію, мережеві запити, перенаправлення. Реальне QA форм, а не модульні тести.
Аудит доступності
Агент проходить по сторінці, запитує дерево доступності через browser_get_state і browser_evaluate, перевіряє alt-тексти, атрибути ARIA, управління фокусом, навігацію клавіатурою. Звітує про проблеми зі скріншотами.
Дизайн QA проти Figma
Поєднайте з функцією Figma to AI agents. Агент завантажує кадр Figma, робить скріншоти, завантажує локальну сторінку, робить скріншоти, порівнює відступи, шрифти, кольори, вирівнювання. Файли список невідповідностей.
Перевірка тунелю живого попереднього перегляду
Поєднайте з тунелем localhost AgentsRoom. Агент переходить на публічний HTTPS URL попереднього перегляду (не localhost), перевіряє, чи сайт доступний ззовні, робить скріншоти і підтверджує, що зацікавлена сторона може фактично відкрити посилання.
Відтворення помилки клієнта з публічного квитка у беклозі
Публічний квиток у беклозі надходить з URL та кроками для відтворення. Агент з контролю якості відкриває URL, виконує кроки, фіксує помилку в консолі, додає скріншот і передає розробнику з чистим відтворенням. Більше ніяких циклів 'не вдається відтворити'.
Вкажіть на елемент, надішліть його прямо агенту
Керування браузером - це лише половина історії. Іноді саме ви помічаєте проблему: кнопка, яка не вирівняна, мітка з неправильним текстом, картка, яка ламається на мобільному. Замість того, щоб описувати це словами, ви вказуєте на це. Вбудований браузер має режим вказівки: натисніть будь-який елемент на сторінці, і AgentsRoom захоплює його точний CSS селектор з живого DOM.
Додайте коротку примітку, наприклад, 'звузити цей відступ' або 'неправильний колір тут', і вказаний елемент плюс ваша анотація надсилаються активному агенту як точний, недвозначний запит на зміну. Більше ніяких 'третя картка зліва': агент отримує селектор, навколишній контекст і ваш намір в одному пакеті.
Режим вказівки в браузері AgentsRoom: натисніть на елемент, додайте примітку, і точний селектор плюс ваша анотація надсилаються агенту як вказана зміна.
Увійти в режим вказівки
Відкрийте вбудований браузер на вашому додатку і натисніть кнопку вказівки. Кожен елемент підсвічується, коли ви наводите на нього курсор.
Натисніть на елемент
Натисніть на кнопку, текстовий блок або картку, яку ви хочете змінити. AgentsRoom фіксує її і зчитує її точний CSS селектор з живого DOM.
Додайте примітку і надішліть
Введіть, що слід змінити, і підтвердіть. Селектор, навколишній контекст і ваша примітка передаються активному агенту як вказана зміна.
Як агент отримує браузер
Відкрийте вкладку Браузер у вашій кімнаті
У вашій проектній кімнаті праворуч є три вкладки: Файли, Зміни, Браузер. Натисніть Браузер. Панель розширюється, бічна панель згортається, і з'являється реальний вигляд Chromium. Введіть URL або виберіть з історії проекту.
Поставте галочку 'Доступ до браузера' на агенті
Відкрийте модальне вікно Редагувати агента, розгорніть Можливості, поставте галочку Доступ до браузера. AgentsRoom об'єднує запис agentsroom-browser у .mcp.json вашого проекту, і агент побачить інструменти браузера при наступному запуску.
<project>/.mcp.jsonАгент завантажується з браузером MCP
При запуску агента 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), і відтепер може керувати браузером.
Агент використовує браузер
Агент навігує, клацає, вводить текст, робить скріншоти, читає консоль. Кожна дія проходить через петльовий міст WebSocket (127.0.0.1, порт, призначений ОС, 32-байтовий hex токен, що регенерується при кожному запуску настільного додатку). Після кожної дії, що змінює сторінку, скріншот повертається вбудованим, щоб агент візуально перевірив свій рух.
Автоматично націлюйте localhost або ваш тунель
Якщо працює тунель localhost, перша навігація приземляється на URL тунелю. В іншому випадку, перший виявлений dev сервер. В іншому випадку, https://localhost:3000. У поєднанні з Dev Terminals, агент буквально запускає dev сервер, потім відкриває його в браузері, а потім тестує його.
Перевірте, зробіть скріншот, передайте
Коли підключено до Agent Teams, вузол контролю якості виконує свої сценарії, робить скріншоти, встановлює flags.qaPassed у вантажі передачі. Наступний агент успадковує вердикт. Успіх переходить до PM, невдача повертається до розробника з підказками тесту.
Під капотом
Для цікавих. Стек автоматизації браузера невеликий навмисно.
Кожен проект має один Chromium WebContentsView (сучасний API Electron, а не застарілий BrowserView), накладений на головне вікно в межах, що передаються від рендерера React. Розділення сесій за проектами зберігає cookies, localStorage та аутентифікацію ізольованими між проектами. За замовчуванням межі поза екраном дозволяють агентам викликати інструменти браузера навіть до того, як людина відкриє вкладку Браузер, з тайм-аутом на 5 секунд для скріншотів, щоб уникнути зависань.
Легкий сервер WebSocket (browser-bridge.ts) працює на петльовому порту, обраному ОС, прив'язаний лише до 127.0.0.1. Аутентифікація використовує 32-байтовий hex токен, що регенерується при кожному запуску настільного додатку. Файл мосту ~/.agentsroom/browser-bridge.json містить поточний порт, токен і PID, атомарно переписується при кожному запуску, тому підпроцес MCP завжди отримує свіжі облікові дані з автоматичним повтором.
Сам сервер MCP - це browser-mcp-server.cjs, скрипт Node без залежностей, що реалізує протокол MCP 2024-11-05 через stdio (initialize, tools/list, tools/call). Він спілкується JSON-RPC з мостом WebSocket через саморобний клієнт WebSocket (без ws, без @modelcontextprotocol/sdk). Маленький, швидкий, легкий для аудиту. Упакований як файл extraResources у настільному додатку, тому кожна установка постачається з ним готовим до роботи.
Рідна підтримка браузера (першокласна функція браузера поза MCP) знаходиться в дорожній карті AgentsRoom. Поза цим, довгостроковий план включає додаткові MCP, щоб агенти могли також керувати не веб-цілями: React Native MCP для мобільних додатків і Electron MCP для настільних додатків. Та ж ідея, той же UX: агент не просто пише код, він фактично виконує працюючий додаток.
FAQ
Чим це відрізняється від Playwright MCP або інструментів браузера на основі Puppeteer?
MCP на основі Playwright і Puppeteer запускають новий безголовий браузер у кожній сесії. Це добре для безстанних завдань, але втрачає cookies, localStorage і аутентифікацію між викликами, і людина не може бачити, що робить агент. AgentsRoom Browser - це той самий браузер, який використовує людина всередині додатку, з постійною сесією за проектом, видимою користувачеві в реальному часі. Агент керує вікном, яке ви можете бачити і перевизначати в будь-який час. Це більш чесна, більш дебагована автоматизація браузера.
Чи працює це з усіма постачальниками AI, чи тільки з Claude Code?
Це працює з кожним постачальником, якого підтримує AgentsRoom: Claude Code, Codex CLI, OpenCode, Antigravity CLI, Aider, Grok Build, Mistral Vibe і Kimi Code. Інструменти браузера доступні через стандартний Model Context Protocol, який всі ці CLI читають з .mcp.json. Агент ніколи не знає, що він у AgentsRoom, він просто бачить набір інструментів MCP і використовує їх так, як використовував би будь-який інший інструмент.
Чи може агент керувати віддаленим сайтом, чи тільки localhost?
Обидва. Введіть будь-який URL і вперед. Localhost (і форми host:port) розпізнаються розумно, префіксуються http:// і відкриваються безпосередньо. Публічні сайти працюють як у будь-якому звичайному браузері, з cookies і станом входу, збереженим за проектом. У поєднанні з тунелем localhost AgentsRoom, агент може також керувати вашим локальним dev сервером через публічний HTTPS URL, що корисно для міжмережевих і мобільних QA.
Чи безпечний браузер MCP? Що зупиняє його від зловживання?
Міст прив'язується лише до 127.0.0.1, ніколи до 0.0.0.0. Порт призначається ОС (немає фіксованого порту для сканування, схильного до колізій). 32-байтовий hex токен потрібен для кожного з'єднання, регенерується при кожному запуску настільного додатку. Підпроцес MCP отримує облікові дані лише через змінні середовища, ніколи в жодному зафіксованому файлі. Доступ до браузера є опціональним для кожного агента в модальному вікні Редагувати агента. Якщо ви його видалите, запис .mcp.json буде видалено, і агент більше не зможе використовувати інструменти.
Чи бачить агент консоль браузера (помилки, попередження, мережу)?
Так, через browser_get_logs. Буфер містить повідомлення console.log, console.warn і console.error з головного світу сторінки. Багато реальних помилок (помилки гідратації React, попередження useEffect, збої CORS) з'являються лише в консолі, ніколи в модульних тестах, тому це виявляється одним з найефективніших інструментів для агента QA.
Що відбувається зі скріншотами, які повертаються агенту? Чи коштують вони багато токенів?
Після кожної дії, що змінює сторінку, до відповіді інструмента додається скріншот у форматі base64 PNG, обмежений до 1,6 МБ. Якщо розмір перевищує це значення, натомість надсилається текстовий маркер. Скріншоти критично важливі для надійності (агент, який бачить екран, робить набагато менше помилок), тому компроміс виправданий. Якщо ви хочете відключити скріншоти з бюджетних причин, прості виклики browser_evaluate повертають лише текст.
Чи може агент заповнити форму входу? Зберегти свою сесію?
Так. Cookies і localStorage зберігаються для кожного проєкту в розділі сесії persist:agentsroom-browser-<projectId>. Агент може увійти один раз за допомогою browser_type і browser_click і залишатися увійшовшим протягом усього запуску. Коли ви переключаєте проєкт, сесія змінюється, тому облікові дані ніколи не переносяться між проєктами.
Чи зламається агент, якщо сервер розробки не працює?
Він перейде за URL-адресою і побачить сторінку помилки Chromium. Він може прочитати цю помилку через browser_get_state і browser_get_logs і відповідно відреагувати: попросити вас запустити сервер або викликати команду Dev Terminals для його запуску. З Agent Teams і Dev Terminals ви можете налаштувати робочий процес, який запускає сервер, чекає, а потім відкриває браузер, все без втручання людини.
Чи підтримуються мобільні та настільні додатки також?
Веб-додатки доступні вже сьогодні через вбудований Chromium і AgentsRoom Browser MCP. Дорожня карта включає рідний AgentsRoom Browser як повноцінну функцію браузера. Крім того, плануються додаткові MCP сервери: React Native MCP, щоб агенти могли керувати iOS і Android Expo пакетами, і Electron MCP, щоб агенти могли керувати настільними додатками, які не є веб-додатками. Така ж логіка агента, застосована до не веб-цілей.
Чи може людина призупинити агента і взяти на себе керування браузером?
Так. Браузер - це той самий перегляд Chromium, який використовує людина. У будь-який момент натисніть у панелі браузера, і ви контролюєте. Як тільки ви перестаєте взаємодіяти, агент може відновити свої виклики інструментів. Немає поняття 'браузер, заблокований агентом', це спільна поверхня, точно як сесія парного програмування.
Про : Делегування агента
Дозвольте дешевшому агенту QA керувати браузером, а не вашому агенту розробки
Browser MCP найкраще працює, коли агент розробки не керує ним безпосередньо. Делегування агента направляє тест браузера до окремого, дешевшого агента QA через єдиний виклик run_qa_test MCP. Ваш Opus або Codex зосереджуються на доставці коду, агент QA виконує кліки на меншій моделі, вердикт повертається як один рядок. Той самий Browser MCP, менший рахунок, чистіший контекст.
Прочитайте сторінку Делегування агентаДайте вашим агентам справжні очі браузера
Увімкніть доступ до браузера для будь-якого агента в AgentsRoom. Browser MCP запускається автоматично. Ваш агент QA нарешті тестує те, що він доставляє.
Додаток-компаньйон: контролюйте своїх агентів на ходу
Використовуйте свого: Claude, Codex, Antigravity CLI або іншого AI-провайдера.
Надсилайте баги та запити прямо у свій публічний беклог.
Погляд на AgentsRoom в дії.