Установка и настройка agent-browser

Установка agent-browser занимает буквально пару минут. Инструмент работает без дополнительной настройки MCP-серверов.

Системные требования

Node.js: версия 18 или новее
ОС: macOS, Linux или Windows
Rust (опционально): для сборки нативного бинарника

Установка через npm

# Глобальная установка CLI
npm install -g agent-browser

# Установка Playwright и браузеров
agent-browser install

Команда agent-browser install автоматически:

Устанавливает Playwright
Скачивает браузеры Chromium/Firefox/WebKit
Настраивает daemon-процесс

Проверка установки

# Показать версию
agent-browser --version

# Просмотр справки
agent-browser --help

Основные команды

agent-browser предлагает минималистичный, но мощный набор команд для управления браузером.

Управление сессиями

# Создать новую сессию (headed режим)
agent-browser launch

# Headless режим
agent-browser launch --headless

# Запустить с указанием браузера
agent-browser launch --browser firefox

# Закрыть активную сессию
agent-browser close

Получение снимка страницы (Snapshot)

Это ключевая особенность agent-browser — вместо передачи всего DOM-дерева, вы получаете компактное представление интерактивных элементов:

# Получить снимок в JSON
agent-browser snapshot -i --json

# Только интерактивные элементы
agent-browser snapshot -i

# Полное дерево доступности
agent-browser snapshot

Пример вывода snapshot:

{
  "url": "https://example.com",
  "title": "Example Domain",
  "refs": [
    {
      "ref": "e1",
      "role": "link",
      "name": "More information...",
      "tag": "a"
    },
    {
      "ref": "e2", 
      "role": "button",
      "name": "Submit",
      "tag": "button"
    }
  ]
}

Взаимодействие с элементами через Refs

После получения snapshot вы можете оперировать элементами через их уникальные ссылки:

# Клик по элементу
agent-browser click @e2

# Ввод текста
agent-browser fill @e5 "текст для ввода"

# Выбор из выпадающего списка
agent-browser select @e7 "option-value"

# Наведение курсора
agent-browser hover @e3

Скриншоты и отладка

# Сделать скриншот
agent-browser screenshot output.png

# Скриншот в base64
agent-browser screenshot --base64

# Получить HTML страницы
agent-browser html

# Выполнить JavaScript
agent-browser eval "document.title"

Интеграция с AI-ассистентами

agent-browser отлично работает с популярными AI-помощниками для разработки.

Claude Code

В Claude Code достаточно запустить agent-browser в терминале, и AI сможет автоматически использовать его команды:

# AI-ассистент может выполнять такие команды:
agent-browser launch
agent-browser goto https://news.ycombinator.com
agent-browser snapshot -i --json
agent-browser click @e15

Cursor

Настройка в Cursor:

Откройте настройки Cursor
В разделе AI Rules добавьте:

Используй agent-browser для автоматизации браузера.
Всегда получай snapshot перед взаимодействием с элементами.
Используй refs (@eN) для ссылки на элементы.

Пример использования

Попросите AI-ассистента:

"Открой Hacker News, найди статью о Rust и кликни на неё"

AI автоматически выполнит:

agent-browser launch
agent-browser goto https://news.ycombinator.com
agent-browser snapshot -i --json
# AI анализирует refs и находит нужную ссылку
agent-browser click @e42

Сравнение с Playwright MCP

Давайте разберёмся, почему agent-browser экономит на 93% больше токенов.

Проблемы Playwright MCP

Слишком много инструментов (26+ методов):

goto, click, fill, press, hover, select, 
screenshot, pdf, evaluate, waitForSelector,
waitForNavigation, getByRole, getByText,
getByLabel, getByPlaceholder, ...

Огромные деревья доступности:

{
  "role": "WebArea",
  "name": "Example Page",
  "children": [
    {
      "role": "banner",
      "children": [
        {
          "role": "navigation",
          "children": [
            // Сотни вложенных узлов...
          ]
        }
      ]
    }
  ]
}

Решение agent-browser

Минималистичный набор команд (10 основных):

launch, close, goto, snapshot, click, 
fill, select, screenshot, back, forward

Компактные refs:

{
  "refs": [
    {"ref": "e1", "role": "link", "name": "Главная"},
    {"ref": "e2", "role": "button", "name": "Войти"}
  ]
}

Реальный пример экономии

Playwright MCP для страницы новостей:

Дерево доступности: ~15 000 токенов
Список инструментов: ~2 000 токенов
Итого: ~17 000 токенов

agent-browser для той же страницы:

Snapshot с refs: ~1 200 токенов
Экономия: 93%

Практические примеры

Пример 1: Автоматизация поиска

# Запускаем браузер
agent-browser launch --headless

# Открываем Google
agent-browser goto "https://www.google.com"

# Получаем интерактивные элементы
agent-browser snapshot -i --json

# Вводим поисковый запрос (предположим, ref поля ввода — e3)
agent-browser fill @e3 "agent-browser github"

# Нажимаем Enter
agent-browser press @e3 Enter

# Делаем скриншот результатов
agent-browser screenshot search-results.png

Пример 2: Заполнение формы

agent-browser launch
agent-browser goto "https://example.com/contact"

# Получаем refs полей формы
agent-browser snapshot -i --json

# Заполняем поля (предположим refs: e5, e6, e7)
agent-browser fill @e5 "Иван Иванов"
agent-browser fill @e6 "[email protected]"
agent-browser fill @e7 "Привет, это тестовое сообщение"

# Отправляем форму
agent-browser click @e8

Пример 3: Мониторинг изменений на сайте

#!/bin/bash
# Скрипт для отслеживания изменений на странице

agent-browser launch --headless
agent-browser goto "https://news.ycombinator.com"

while true; do
  # Сохраняем снимок каждые 5 минут
  agent-browser snapshot -i --json > snapshot-$(date +%s).json
  agent-browser screenshot screenshot-$(date +%s).png
  sleep 300
done

Расширенные возможности

Работа с несколькими сессиями

agent-browser поддерживает параллельные сессии браузера:

# Запустить несколько экземпляров с разными портами
agent-browser launch --port 9222
agent-browser launch --port 9223

# Работать с разными сессиями
agent-browser --port 9222 goto https://site1.com
agent-browser --port 9223 goto https://site2.com

Headless vs Headed режим

Headless (без UI) — для продакшена и CI/CD:

agent-browser launch --headless

Headed (с UI) — для отладки и разработки:

agent-browser launch

Выбор браузера

# Chromium (по умолчанию)
agent-browser launch

# Firefox
agent-browser launch --browser firefox

# WebKit (Safari engine)
agent-browser launch --browser webkit

Выполнение JavaScript

# Простое выражение
agent-browser eval "document.title"

# Сложная логика
agent-browser eval "
  const buttons = document.querySelectorAll('button');
  return buttons.length;
"

# С выводом в JSON
agent-browser eval --json "({
  title: document.title,
  url: window.location.href
})"

Советы по оптимизации

1. Всегда используйте snapshot перед действиями

❌ Плохо:

agent-browser click button.submit-btn

✅ Хорошо:

agent-browser snapshot -i --json
agent-browser click @e12

2. Используйте JSON-формат для AI

JSON-вывод идеален для парсинга AI-ассистентами:

agent-browser snapshot -i --json > page-state.json

3. Закрывайте сессии после работы

# Ваш скрипт...
agent-browser close

Или используйте trap в bash:

trap "agent-browser close" EXIT
agent-browser launch
# Ваш код...

4. Используйте —headless для CI/CD

# В .github/workflows/test.yml
- name: Run browser tests
  run: |
    agent-browser launch --headless
    agent-browser goto https://myapp.com
    agent-browser snapshot -i --json

Устранение неполадок

Браузер не запускается

Проблема: Error: Browser not found

Решение:

# Переустановите браузеры
agent-browser install

# Или укажите путь вручную
PLAYWRIGHT_BROWSERS_PATH=/path/to/browsers agent-browser launch

Daemon не отвечает

Проблема: Команды зависают

Решение:

# Перезапустите daemon
pkill -f "agent-browser"
agent-browser launch

Ошибки с Rust-бинарником

Проблема: Нативный бинарник не работает

Решение: agent-browser автоматически переключится на Node.js-версию, но вы можете принудительно использовать её:

export AGENT_BROWSER_USE_NODE=1
agent-browser launch

Refs не находятся

Проблема: После snapshot элементы не кликабельны

Решение:

# Дождитесь загрузки страницы перед snapshot
agent-browser goto https://example.com
sleep 2
agent-browser snapshot -i --json

Заключение

agent-browser — это действительно прорыв в автоматизации браузера для AI-агентов. Вместо того чтобы скармливать вашему ассистенту огромные деревья DOM и десятки методов Playwright, вы даёте ему лаконичный инструмент, который говорит на языке "что нужно сделать", а не "как это технически реализовать".

Ключевые преимущества:

✅ Экономия 93% токенов контекста
✅ Нулевая настройка — установил и работает
✅ Совместимость со всеми популярными AI-ассистентами
✅ Производительность благодаря Rust
✅ Надёжность благодаря Node.js fallback

Попробуйте agent-browser в своём следующем проекте автоматизации — ваш AI-ассистент скажет вам спасибо! 🚀

Полезные ссылки:

GitHub репозиторий
Документация Vercel Labs
APIYI: Надёжная платформа-прокси для API больших языковых моделей — выгодные цены, бесплатный пробный период

Быстрый старт с agent-browser

Установка и настройка

Для установки достаточно двух команд:

npm install -g agent-browser
agent-browser install  # Скачивание Chromium

Для установки системных зависимостей на Linux:

agent-browser install --with-deps

Основное использование

Вот примеры самых часто используемых команд:

# Открыть веб-страницу
npx agent-browser open example.org

# Получить снимок страницы (интерактивные элементы)
npx agent-browser snapshot -i

# Кликнуть по элементу (используя ref-ссылку)
npx agent-browser click @e2

# Открыть в новой вкладке
npx agent-browser tab new vercel.com

# Заполнить форму
npx agent-browser fill @e3 "[email protected]"

# Сделать скриншот
npx agent-browser screenshot output.png

Посмотреть полный список команд

# Навигация
agent-browser open <url>          # Открыть страницу
agent-browser back                # Назад
agent-browser forward             # Вперед
agent-browser reload              # Обновить

# Взаимодействие с элементами
agent-browser click <selector>    # Клик
agent-browser dblclick <selector> # Двойной клик
agent-browser fill <sel> <text>   # Заполнить поле ввода
agent-browser type <sel> <text>   # Посимвольный ввод
agent-browser press <key>         # Нажать клавишу
agent-browser hover <selector>    # Навести курсор
agent-browser select <sel> <val>  # Выбрать из выпадающего списка
agent-browser check <selector>    # Установить флажок
agent-browser scroll <direction>  # Прокрутить
agent-browser drag <from> <to>    # Перетащить
agent-browser upload <sel> <file> # Загрузить файл

# Получение информации
agent-browser get text <selector>   # Получить текст
agent-browser get html <selector>   # Получить HTML
agent-browser get value <selector>  # Получить значение
agent-browser get attr <sel> <attr> # Получить атрибут
agent-browser get title             # Получить заголовок
agent-browser get url               # Получить URL
agent-browser is visible <selector> # Виден ли элемент
agent-browser is enabled <selector> # Активен ли элемент

# Снимки и скриншоты
agent-browser snapshot         # Полный снимок
agent-browser snapshot -i      # Только интерактивные элементы
agent-browser snapshot --json  # Вывод в формате JSON
agent-browser screenshot       # Скриншот

# Управление сессиями
agent-browser --session mytest open url  # Именованная сессия
agent-browser close                      # Закрыть сессию

Совет: Используйте параметр --json для получения структурированного вывода — так AI-агенту будет проще разобрать результат.

Как работает Snapshot + Refs

Это ключевая фишка agent-browser — детерминированные операции через снимки дерева доступности и ссылки на элементы.

Получение снимка

agent-browser snapshot -i

Пример вывода:

button "Submit" [ref=e2]
input "Email" [ref=e3]
link "Learn more" [ref=e4]

Выполнение операций через Refs

# Используем синтаксис @e# для ссылки на элементы
agent-browser click @e2        # Кликнуть по кнопке Submit
agent-browser fill @e3 "[email protected]"  # Заполнить поле email

Преимущества такого подхода

Традиционный способ	Snapshot + Refs
При каждой операции заново ищем элемент в DOM	Берём refs из снимка — повторный поиск не нужен
CSS-селекторы могут перестать работать	refs остаются стабильными, пока страница не изменилась
Требуется сложная логика определения элементов	Просто используем `@e#`

Сравнение agent-browser и Playwright MCP

Критерий	agent-browser	Playwright MCP
Расход контекста	Снижение на 93%	Полное дерево доступности
Установка и настройка	npm install и готово	Требуется настройка MCP Server
Способ выполнения	Bash-команды	Протокол MCP
Совместимость	Любой Agent с поддержкой Bash	Необходима поддержка MCP

Использование с AI-помощниками для программирования

Интеграция с Claude Code

В диалоге с Claude Code просто скажите, чтобы он использовал agent-browser:

Пожалуйста, используй agent-browser для открытия example.org и нажми на кнопку входа

Claude Code выполнит:

npx agent-browser open example.org
npx agent-browser snapshot -i
# Анализирует снимок и находит кнопку входа
npx agent-browser click @e5

Интеграция с Cursor / Copilot / Codex

Все эти инструменты поддерживают выполнение Bash-команд, поэтому agent-browser работает из коробки. Главное — в промпте указать, что нужно использовать именно agent-browser, а не fetch или web-search.

Лучшие практики

Явно указывайте инструмент: Скажите AI использовать agent-browser, чтобы он не вызывал другие браузерные инструменты
Используйте JSON-вывод: Параметр --json упрощает парсинг результатов для AI
Используйте Snapshot по полной: Сначала получите снимок страницы, затем выполняйте действия
Именуйте сессии: Используйте --session для управления несколькими экземплярами браузера

Часто задаваемые вопросы

В1: В чём разница между agent-browser и browser-use?

agent-browser — это CLI-инструмент, который вызывается через Bash-команды; browser-use — это Python-библиотека, которая вызывается через API. agent-browser лучше подходит для интеграции с AI-ассистентами по программированию, поскольку большинство агентов поддерживают выполнение Bash-команд.

В2: Почему использование контекста сокращается на 93%?

Playwright MCP отправляет AI полное дерево доступности — на сложных страницах может быть тысячи узлов. agent-browser использует механизм Snapshot + Refs, возвращая только компактный список ссылок на элементы, что радикально уменьшает объём передаваемой информации.

В3: Как переключаться между Headed и Headless режимами?

По умолчанию используется Headless-режим. Для визуальной отладки добавьте параметр --headed:

agent-browser --headed open example.org

Так вы увидите окно браузера — удобно для отладки и проверки операций.

Резюме

Ключевые преимущества agent-browser:

93% экономии контекста: по сравнению с Playwright MCP значительно снижает расход токенов, избегая предупреждений о длинном контексте
Работает из коробки: не требует установки MCP, после глобальной установки через npm сразу готов к использованию
Snapshot + Refs: инновационный рабочий процесс с детерминированным выбором элементов, без повторных запросов к DOM
Широкая совместимость: поддерживает Claude Code, Cursor, Codex, Copilot, Gemini и любые AI-агенты, работающие с Bash

Для сценариев, где AI-ассистенту нужно выполнять операции в браузере, agent-browser — самый эффективный выбор на сегодня.

Если вы используете AI-ассистентов для веб-разработки или тестирования, рекомендую попробовать agent-browser. В связке с сервисами AI-моделей от APIYI apiyi.com можно создавать ещё более эффективные автоматизированные рабочие процессы.

Front Matter

Оставьте front matter без изменений — он должен быть в начале файла.

Справочные материалы

⚠️ О формате ссылок: Все внешние ссылки приведены в формате Название: domain.com для удобства копирования, но без возможности перехода — это помогает избежать потери SEO-веса.

Репозиторий agent-browser на GitHub: Официальный проект Vercel Labs с полной документацией и примерами
- Ссылка: github.com/vercel-labs/agent-browser
- Описание: Здесь можно посмотреть последние обновления функционала и инструкции по использованию
Twitter Криса Тейта: Twitter-аккаунт автора agent-browser
- Ссылка: x.com/ctatedev
- Описание: Следите за новостями проекта и полезными советами по работе с инструментом
Сравнительный анализ Playwright MCP: Разбор проблемы избыточности инструментов Playwright MCP
- Ссылка: speakeasy.com/blog/playwright-tool-proliferation
- Описание: Узнайте, какие именно проблемы решает agent-browser

Автор: Техническая команда
Обсуждение: Приглашаем к дискуссии в комментариях. Больше материалов — на техническом портале APIYI apiyi.com

Установка и настройка agent-browser

Системные требования

Установка через npm

Проверка установки

Основные команды

Управление сессиями

Навигация

Получение снимка страницы (Snapshot)

Взаимодействие с элементами через Refs

Скриншоты и отладка

Интеграция с AI-ассистентами

Claude Code

Cursor

Пример использования

Сравнение с Playwright MCP

Проблемы Playwright MCP

Решение agent-browser

Реальный пример экономии

Практические примеры

Пример 1: Автоматизация поиска

Пример 2: Заполнение формы

Пример 3: Мониторинг изменений на сайте

Расширенные возможности

Работа с несколькими сессиями

Headless vs Headed режим

Выбор браузера

Выполнение JavaScript

Советы по оптимизации

1. Всегда используйте snapshot перед действиями

2. Используйте JSON-формат для AI

3. Закрывайте сессии после работы

4. Используйте —headless для CI/CD

Устранение неполадок

Браузер не запускается

Daemon не отвечает

Ошибки с Rust-бинарником

Refs не находятся

Заключение

Быстрый старт с agent-browser

Установка и настройка

Основное использование

Как работает Snapshot + Refs

Получение снимка

Выполнение операций через Refs

Преимущества такого подхода

Сравнение agent-browser и Playwright MCP

Использование с AI-помощниками для программирования

Интеграция с Claude Code

Интеграция с Cursor / Copilot / Codex

Лучшие практики

Часто задаваемые вопросы

Резюме

Front Matter

Справочные материалы

Похожие записи