Как работают browser agents и computer use agents (Claude Computer Use)?

Краткий тезис

Browser agents и computer use agents — это классы AI-агентов, которые автоматизируют взаимодействие с интерфейсами: первые управляют браузером через протокол DevTools (клики, ввод текста, навигация), вторые эмулируют действия человека на уровне операционной системы (движение мыши, нажатия клавиш, снятие скриншотов). Архитектура обоих типов строится по схеме «наблюдение → vision/текстовый encoder → LLM → действие», но различаются каналом взаимодействия (DOM / accessibility‑tree против пиксельного экрана). Вопрос безопасности (safety) и ограничения на действия — ключевые элементы production‑развёртывания.

1. Термины и место в экосистеме Agentic RAG

Browser agent — AI-агент, который управляет веб‑браузером программно, используя DevTools Protocol (Chrome) или WebDriver (Firefox). Он может кликать, скроллить, вводить текст, читать содержимое страницы через accessibility tree (дерево доступности) или DOM. Примеры: фреймворки Playwright, Puppeteer, Browser‑Use, Agent‑QL.

Computer use agent (известный по Claude Computer Use от Anthropic) — агент, который управляет компьютером на уровне операционной системы: двигает курсор мыши, нажимает клавиши, делает скриншоты экрана и анализирует их с помощью vision‑модели.

Оба типа входят в более широкую категорию AI agents, способных выполнять последовательности действий (actions) для достижения цели, и являются естественным расширением Agentic RAG: когда RAG‑система не только ищет информацию, но и сама совершает действия в цифровой среде.

2. Browser agents: как они работают

2.1 Канал взаимодействия: DevTools Protocol

Browser agent подключается к браузеру (обычно Chromium через Puppeteer или Playwright) и использует команды вида:

• page.click(selector) — клик по элементу
• page.type(selector, text) — ввод текста
• page.evaluate(js) — выполнение произвольного JavaScript
• page.screenshot() — снятие скриншота

Ключевая особенность: агент читает состояние страницы не через пиксели, а через структурированное DOM‑дерево или accessibility tree. Accessibility tree — это упрощённое представление интерфейса для скринридеров: оно содержит только интерактивные и значимые элементы (кнопки, ссылки, заголовки) с их атрибутами (роль, имя, состояние, bounding box).

2.2 Процесс работы browser agent

1. Наблюдение: агент получает состояние страницы (DOM + accessibility tree) + возможно скриншот
2. Планирование: LLM анализирует состояние и планирует следующее действие (например, «нажать на кнопку "Поиск"»)
3. Действие: агент выполняет команду DevTools (click, type, scroll)
4. Цикл: повторяется до достижения цели (например, заполнение формы, сбор данных)

2.3 Преимущества и ограничения

3. Computer use agents (на примере Claude Computer Use)

3.1 Архитектура «screenshot → vision → LLM → action»

Claude Computer Use (выпущен Anthropic в 2024) — это computer use agent, который получает скриншот экрана (или его часть), передаёт его в vision encoder (например, в модель Claude 3.5 Sonnet), а затем LLM генерирует команду для эмуляции мыши и клавиатуры.

Типичный pipeline

# Псевдокод работы computer use agent
screenshot = capture_screen()
action = llm.act(instruction + screenshot)  # возвращает {"type": "click", "x": 100, "y": 200}
if action["type"] == "click":
    mouse_click(action["x"], action["y"])
elif action["type"] == "type":
    keyboard_type(action["text"])

3.2 Какие действия поддерживаются

• Mouse click (левая кнопка, правая, double‑click)
• Mouse move (перемещение курсора)
• Scroll (вертикальный/горизонтальный)
• Keyboard input (отдельные символы, комбинации, спецклавиши)
• Screenshot (повторный захват)
• Wait (пауза)

Все действия выполняются на уровне ОС: используются библиотеки вроде pyautogui, pynput, Selenium (для браузерного режима, но с координатами пикселей).

3.3 Как LLM понимает координаты

Vision‑модель видит пиксели и возвращает относительные координаты (например, центр кнопки на скриншоте). Агент преобразует их в абсолютные координаты ОС, учитывая масштабирование экрана и смещение окна.

4. Сравнение browser agents и computer use agents

5. Компоненты архитектуры: screen → vision → LLM → action

5.1 Скриншот (Screen capture)

• Делается с помощью системных API (Xlib, CGDisplayStream, Windows.Graphics.Capture)
• Размер изображения сжимается под входные требования vision‑encoder (например, до 1024x768)
• Частота захвата: от 1 до 5 раз в секунду (чтобы не перегружать модель)

5.2 Vision encoder

• Преобразует изображение в эмбеддинги или токены (например, CLIP у OpenAI, SigLIP у Anthropic)
• В Claude Computer Use используется встроенный vision‑encoder модели Claude 3.5 Sonnet
• Vision encoder должен распознавать интерфейсные элементы: кнопки, поля ввода, иконки

5.3 LLM (Large Language Model)

• Получает визуальные токены + текстовую инструкцию (например, «найди поле "Имя" и введи "Анна"»)
• Генерирует струкурированный action в формате JSON или DSL
• Пример вывода LLM:

{
  "thought": "Сначала нужно кликнуть на поле ввода логина",
  "action": {
    "type": "click",
    "coordinates": {"x": 200, "y": 350}
  }
}

• Модель может делать несколько действий подряд (chain of thought + multi‑step actions)

5.4 Action executor

• Получает команды от LLM и исполняет их на уровне ОС (через pyautogui, pynput, или напрямую через WinAPI/X11)
• Обрабатывает ошибки (например, элемент не появился — повторный screenshot)

6. Обеспечение безопасности (Safety)

Агенты, способные управлять компьютером, представляют серьёзные риски. Основные меры:

6.1 Ограничения на уровне среды

• Whitelist URL для browser agents (доступен только указанный сайт)
• Read‑only режим: запретить ввод/изменение данных
• Sandbox: выполнение в изолированном контейнере (Docker, виртуальная машина)
• Timeouts: автоматическая остановка после N шагов или N секунд

6.2 Программные механизмы

• Confirmation dialogs: перед деструктивными действиями (отправка формы, удаление) запрос подтверждения
• Rate limiting: ограничение числа действий в минуту
• Content filtering: проверка скриншотов на чувствительные данные

6.3 Этические ограничения

Anthropic для Claude Computer Use вводит:

• Запрет на действия, требующие аутентификации (пароли, банковские операции)
• Автоматическое отключение при обнаружении угрозы
• Пользователь должен подтвердить начало сессии

7. Примеры использования и пет-проект

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

7.2 Пет-проект для закрепления

Задача Создать browser agent, который автоматически регистрируется на тестовом сайте (например, https://example.com/register) и отправляет форму.

Инструменты Python, Playwright (или Puppeteer), OpenRouter/Claude API (или любая LLM с JSON‑output)

Шаги:

1. Установить Playwright и браузер: pip install playwright && playwright install
2. Написать функцию, которая получает accessibility tree страницы через page.accessibility.snapshot()
3. Сделать LLM‑промпт с описанием задачи и доступными действиями (click, type, scroll, wait)
4. LLM возвращает JSON action → выполнить его через Playwright
5. Зациклить, пока не будет достигнута цель (например, текст "Успешная регистрация")
6. Добавить safety: только один сайт, timeout 30 секунд

Ожидаемый результат Рабочий агент, который открывает страницу, заполняет три поля (имя, email, пароль) и кликает "Submit". Код должен быть структурирован как класс BrowserAgent.

Пример кода (упрощённо):

from playwright.sync_api import sync_playwright
import openai, json

class BrowserAgent:
    def __init__(self, llm_client):
        self.browser = sync_playwright().start().chromium.launch()
        self.page = self.browser.new_page()
        self.llm = llm_client

    def run(self, instruction, url):
        self.page.goto(url)
        for step in range(10):
            snapshot = self.page.accessibility.snapshot()
            # Преобразуем snapshot в текстовое описание
            prompt = f"Страница: {snapshot}. Задача: {instruction}. Твои действия (JSON):"
            response = self.llm.chat(prompt)
            action = json.loads(response)
            self.execute(action)

    def execute(self, action):
        if action["type"] == "click":
            self.page.click(action["selector"])
        elif action["type"] == "type":
            self.page.fill(action["selector"], action["text"])

8. Связь с другими вопросами

9. Навигация

• Предыдущий: 899
• Следующий: 901
• Индекс: 00. Индекс разборов

Навигация

• Предыдущий: 899
• Следующий: —
• Индекс: 00. Индекс разборов