Як я зробив CLI для Claude Code, щоб витрачати менше токенів при роботі з фронтендом

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Як я зробив CLI для Claude Code, щоб менше витрачати токенів при роботі з фронтендом

Останнім часом майже весь новий код пишу разом із Claude Code. І в якийсь момент помітив одну проблему.

Коли AI працює з фронтендом, він не бачить, що відбувається в браузері. Потрібно якось передати йому консоль, мережеві запити, HTML або скріншот.

Перше, що спадає на думку, — MCP. Але мені не дуже подобалось, що в контекст моделі часто потрапляє більше інформації, ніж потрібно. Крім цього, мені хотілося працювати зі своїм браузером, у якому я вже авторизований і можу паралельно сам виконувати будь-які дії.

Тому я вирішив зробити невеликий CLI.

Ідея досить проста. Один процес постійно тримає з’єднання з Chrome через Chrome DevTools Protocol і записує всі події у журнал. А всі інші команди вже не підключаються до браузера — вони просто читають цей журнал.

Чому саме так?

По-перше, CDP працює як потік подій. Якщо підключитися після того, як помилка вже сталася, її вже не побачиш.

По-друге, відкривати нове CDP-з’єднання на кожну команду просто повільніше.

Для журналу я використав JSONL. Його можна нескінченно дописувати без перезапису всього файлу, він нормально переживає аварійне завершення процесу, а ще його можна дивитися звичайними tail, grep або jq.

Ще одне рішення, яке я прийняв, — фільтрація відбувається не під час запису, а під час читання. Демон зберігає всі запити, а br-network за замовчуванням показує тільки fetch і xhr. Якщо потрібно більше — є --all.

Це дозволило не втрачати інформацію і водночас не засмічувати контекст AI.

Сам код майже повністю написаний Claude Code. Моєю задачею було визначити архітектуру, прийняти ключові технічні рішення, перевірити їх на практиці та багато разів ітеративно доробляти інструмент під реальні сценарії використання.

У результаті вийшов невеликий npm-пакет, який зараз використовую щодня у своїй роботі.

Якщо цікаво спробувати:

GitHub: github.com/ItSuhsko14/browser-cli

npm: www.npmjs.com/...​ckage/browser-inspect-cli

Буду радий будь-якому фідбеку або ідеям.