# Vercel agent-browser

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

Большинство браузер-агентов присылают 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.

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

---

Источник: https://localhost:3000/m/vercel-agent-browser