Наталя ХандусенкоШІ
5 серпня 2026, 13:09
2026-08-05
Український айтівець створив CLI-інструмент, який спрощує фронтенд-розробку з ШІ та економить токени
Розробка користувацьких інтерфейсів за допомогою штучного інтелекту вже стала повсякденністю для багатьох програмістів. Утім, під час роботи виникає суттєва перешкода: ШІ-асистент залишається «сліпим» до того, що насправді відбувається у браузері. Software engineer Андрій Сушко зіштовхнувся з цією проблемою на практиці та розробив власне рішення, яке оптимізує взаємодію з ШІ-агентами та заощаджує гроші.
Розробка користувацьких інтерфейсів за допомогою штучного інтелекту вже стала повсякденністю для багатьох програмістів. Утім, під час роботи виникає суттєва перешкода: ШІ-асистент залишається «сліпим» до того, що насправді відбувається у браузері. Software engineer Андрій Сушко зіштовхнувся з цією проблемою на практиці та розробив власне рішення, яке оптимізує взаємодію з ШІ-агентами та заощаджує гроші.
У чому проблема
Під час налагодження фронтенду штучному інтелекту потрібен доступ до консолі, мережевих запитів та поточного stanu 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 — отримати тільки помилки з консолі;
Розробка створювалася для особистого користування, але показала високу ефективність: розробник залишається в повному контролі над браузером, ШІ отримує точні й стислі дані без зайвого «шуму». Це дозволяє економити тисячі токенів на кожній сесії налагодження.
Зрозумівши зручність інструменту, Андрій Сушко опублікував його у відкритий доступ: GitHub та npm.
Раніше, dev.ua розповідав про те, що Андрій Сушко створив «Генератор протестних плакатів».
