Розробка користувацьких інтерфейсів за допомогою штучного інтелекту вже стала повсякденністю для багатьох програмістів. Утім, під час роботи виникає суттєва перешкода: ШІ-асистент залишається «сліпим» до того, що насправді відбувається у браузері. Software engineer Андрій Сушко зіштовхнувся з цією проблемою на практиці та розробив власне рішення, яке оптимізує взаємодію з ШІ-агентами й заощаджує гроші.
У чому проблема
Під час налагодження фронтенду штучному інтелекту потрібен доступ до консолі, мережевих запитів та поточного стану DOM. Стандартний підхід із використанням MCP-серверів або інструментів на кшталт Playwright CLI виявився неефективним з кількох причин:
- Величезні витрати токенів: MCP-сервери передають надмірну кількість контексту, що миттєво вичерпує ліміти й збільшує вартість запитів.
- Ізольовані сесії: Playwright CLI щоразу відкриває нове вікно браузера. Це позбавляє розробника можливості паралельно взаємодіяти з інтерфейсом вручну, авторизуватися або проходити складні сценарії користувача.
Щоб розв’язати ці проблеми, Андрій створив легкий термінальний клієнт, який працює через Chrome DevTools Protocol (CDP).
Як працює browser-inspect-cli
В основі інструменту лежить фоновий процес (capture daemon), який підключається до відкритого браузера Chrome через CDP.
- Запуск: Команда `br-start` запускає Chrome з remote debugging та фоновий процес запису.
- Логування: Демон утримує єдине з’єднання та постійно записує всі події (повідомлення консолі, критичні помилки сторінки, мережеві запити з тілом відповідей) у локальний файл `~/.browser-cli/events.jsonl`.
- Точковий доступ: Усі команди читання лише звертаються до цього логу. Це дозволяє миттєво отримувати зріз того, що сталося в браузері з моменту старту, без потреби тримати постійний важкий контекст.
Для інтеграції з Claude Code або іншими ШІ-агентами (наприклад, Cursor) достатньо додати інструкції у файл `CLAUDE.md`. Після зчитування результату команди `br-help –ai`, асистент починає самостійно викликати CLI та запитувати лише необхідну інформацію короткими командами:
- `br-console –errors` — отримати тільки помилки з консолі;
- `br-network` — переглянути списки мережевих запитів;
- `br-request 17` — розгорнути деталі конкретного запиту № 17;
- `br-dom «#app»` — зняти зріз конкретного елемента DOM;
- `br-screenshot` — зробити скріншот сторінки;
- `br-reset` — очистити накопичені події.
Розробка створювалася для особистого користування, але показала високу ефективність: розробник залишається в повному контролі над браузером, ШІ отримує точні й стислі дані без зайвого «шуму». Це дозволяє економити тисячі токенів на кожній сесії налагодження.
Зрозумівши зручність інструменту, Андрій Сушко опублікував його у відкритий доступ: GitHub та npm.
Раніше dev.ua розповідав про те, що Андрій Сушко створив «Генератор протестних плакатів».