# Как подключить браузер к ИИ-агенту: выбор и первый сценарий

Материалы AI Product Club · Михаил Карпов



Чтобы ИИ-агент работал с сайтом, ему нужен инструмент для наблюдения страницы и выполнения действий. Для чтения открытой информации иногда достаточно поиска или HTTP-запроса. Браузер нужен, когда важны интерфейс, авторизация, динамическая страница или последовательность кликов.

Начнём с безопасного сценария: открыть публичный учебный сайт, прочитать заголовок и сохранить результат. Затем можно переходить к собственным сервисам и формам.

## Шаг 1. Выбери подходящий способ

| Подход | Когда подходит | Что учитывать |
|---|---|---|
| Расширение обычного браузера | Нужна работа в знакомом интерфейсе | Какие вкладки и профили доступны агенту |
| MCP-сервер управления браузером | Клиент поддерживает MCP и нужен общий набор инструментов | Конфигурация клиента и права процесса |
| CLI или программный сценарий | Повторяющиеся проверки и автоматизация | Поддержка кода, логов и устойчивых селекторов |

Это разные способы организации работы, а не рейтинг скорости. Чтобы сравнить расход токенов и время, нужно прогнать одну задачу в одинаковых условиях. Не стоит объявлять победителя по одному демонстрационному видео.

Для примера используем официальный [Playwright MCP от Microsoft](https://github.com/microsoft/playwright-mcp). Сервер предоставляет браузерные инструменты клиенту, который поддерживает MCP. Сам сервер не является моделью и не заменяет подписку или API-доступ к выбранному агенту.

## Шаг 2. Подключи Playwright MCP

Проверь требования в README проекта. Типовая конфигурация клиента, использующего поле `mcpServers`, выглядит так:

```json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}
```

Не вставляй JSON в произвольный файл: место и формат настроек зависят от клиента. Например, VS Code использует собственную структуру MCP-конфигурации. В официальном README есть инструкции для поддерживаемых приложений.

`@latest` удобно для первого знакомства. Для воспроизводимого командного окружения зафиксируй проверенную версию пакета. После подключения убедись, что клиент показывает сервер и его инструменты. Если нет — проверь доступность Node.js и `npx`, путь к конфигурации и журнал запуска.

## Шаг 3. Дай агенту ограниченную задачу

```text
Открой https://example.com в подключённом браузере.
Прочитай заголовок и адрес ссылки на странице.
Верни заголовок, URL страницы и найденную ссылку.
Не заполняй формы, не авторизуйся и ничего не отправляй.
Если страницу не удалось прочитать, сообщи об ошибке.
```

Результат можно проверить глазами: агент должен описать текущую страницу, а не воспроизвести её по памяти. Для своего тестового сайта добавь контрольную строку, известную только из текущего HTML, и попроси её найти.

## Шаг 4. Настрой цикл наблюдения

Хороший сценарий устроен так: прочитать состояние, выбрать доступный элемент, выполнить действие, проверить новое состояние. После перехода старые идентификаторы элементов могут больше не соответствовать странице.

Если кнопка не сработала, агент должен проверить причину: перекрывающий диалог, отключённое состояние, задержку или смену страницы. Бесконечный повтор клика не делает сценарий надёжнее. Для критичного шага проверяй результат по наблюдаемому признаку: URL, тексту подтверждения или сохранённой записи.

## Шаг 5. Раздели доступы и проверку результата

Для первого эксперимента используй отдельный профиль и учебные данные. Доступ к браузеру с рабочими cookies может означать доступ к корпоративным сервисам. Инструкция «ничего не удалять» полезна, но технические права задаются профилем, аккаунтом и настройками инструментов.

Текст страницы может содержать команды, адресованные агенту. Его следует обрабатывать как содержимое сайта, а не разрешение отправлять данные или менять настройки. Перед финансовыми действиями, публикацией и изменением доступа оставь явную проверку человеком.

[Скачать конфигурацию и сценарий проверки](/downloads/browser-agent.md). Если процесс повторяется, оформи его в [skill](/posts/record-workflow-ai-skill/), а критерии результата — в небольшой [eval](/posts/first-eval/).

Идея материала — из [поста Михаила Карпова в todo2go](https://t.me/todo2go/289). Практические примеры в руководстве учебные, если не указано иное.