ГлавнаяМатериалы из Reels/ShortsЧек-лист
Чек-лист
кодовое словоКоманды

Vercel agent-browser

Vercel agent-browser даёт Claude сёрфить без ожога токенов: вместо скриншотов каждого кадра отдаёт чистое дерево размеченных элементов — на 93% меньше токенов, чем Playwright MCP. Работает и с Electron-приложениями (VS Code, Slack, Notion).

Содержание5 глав
  1. 011. Проблема: скриншот на каждый кадр
  2. 022. Fix: дерево элементов вместо картинки
  3. 033. Как работают ссылки @e1 / @e2
  4. 044. Установка
  5. 055. За пределами обычных сайтов

Большинство браузер-агентов присылают Claude картинку каждого экрана — и это сжигает контекстное окно быстрее, чем сама задача. Фикс не в более умном промте, а в том, чтобы вообще перестать слать скриншоты. Ниже — как это работает и что ставить вместо скриншотного подхода.

Важно
Цифра «на 93% меньше токенов, чем Playwright MCP» — собственная оценка Vercel на конкретной задаче, а не независимый бенчмарк. На других страницах и сценариях экономия может отличаться.

1. Проблема: скриншот на каждый кадр

  • Логика: большинство браузер-агентов присылают Claude картинку каждого экрана — изображение стоит на порядок больше токенов, чем текстовое описание того же экрана.
  • Итог: чем длиннее сессия в браузере, тем быстрее контекстное окно забивается одними скриншотами вместо полезной информации.

2. Fix: дерево элементов вместо картинки

  • Логика: agent-browser — Rust CLI для браузерной автоматизации, который вместо скриншота отдаёт снапшот дерева доступности страницы в виде текста.
  • Итог: Claude получает текстовое описание структуры страницы вместо изображения — в разы дешевле по токенам на тот же объём информации.
agent-browser snapshot

Команда возвращает список элементов вида heading "Example Domain" [ref=e1], button "Submit" [ref=e2].

3. Как работают ссылки @e1 / @e2

  • Логика: каждый элемент страницы получает стабильную ссылку из снапшота — кнопка, поле ввода, ссылка.
  • Итог: Claude выбирает, что кликнуть, по ссылке из текстового дерева, а агент исполняет действие — без нового скриншота на каждый шаг.
agent-browser click @e2       # клик по элементу
agent-browser fill @e3 "text"  # заполнение поля по ссылке из снапшота

4. Установка

npm install -g agent-browser
agent-browser install   # загружает Chrome из Chrome for Testing
  • Альтернативы: brew install agent-browser на macOS или cargo install agent-browser, с той же командой agent-browser install после.
  • Подключение к Claude Code: npx skills add vercel-labs/agent-browser — работает как навык, вызывается через bash; отдельный MCP-сервер не нужен.

5. За пределами обычных сайтов

  • Логика: инструмент умеет подключаться по Chrome DevTools Protocol (CDP), а не только открывать собственные вкладки браузера.
  • Что охватывает: Electron-приложения и WebView2-приложения — то есть десктопные программы на Electron вроде VS Code, Slack или Notion, а не только веб-страницы в браузере.
  • Итог: та же логика снапшотов и ссылок работает и внутри десктопных приложений, построенных поверх Chromium.

Меньше скриншотов — больше места в контексте под саму задачу.

Скачать материал