Как подключить браузер к ИИ-агенту: выбор и первый сценарий
Расширение браузера, Playwright MCP или CLI: как выбрать доступ к вебу, настроить учебный запуск и проверить действия агента.
Чтобы ИИ-агент работал с сайтом, ему нужен инструмент для наблюдения страницы и выполнения действий. Для чтения открытой информации иногда достаточно поиска или HTTP-запроса. Браузер нужен, когда важны интерфейс, авторизация, динамическая страница или последовательность кликов.
Начнём с безопасного сценария: открыть публичный учебный сайт, прочитать заголовок и сохранить результат. Затем можно переходить к собственным сервисам и формам.
Шаг 1. Выбери подходящий способ
| Подход | Когда подходит | Что учитывать |
|---|---|---|
| Расширение обычного браузера | Нужна работа в знакомом интерфейсе | Какие вкладки и профили доступны агенту |
| MCP-сервер управления браузером | Клиент поддерживает MCP и нужен общий набор инструментов | Конфигурация клиента и права процесса |
| CLI или программный сценарий | Повторяющиеся проверки и автоматизация | Поддержка кода, логов и устойчивых селекторов |
Это разные способы организации работы, а не рейтинг скорости. Чтобы сравнить расход токенов и время, нужно прогнать одну задачу в одинаковых условиях. Не стоит объявлять победителя по одному демонстрационному видео.
Для примера используем официальный Playwright MCP от Microsoft. Сервер предоставляет браузерные инструменты клиенту, который поддерживает MCP. Сам сервер не является моделью и не заменяет подписку или API-доступ к выбранному агенту.
Шаг 2. Подключи Playwright MCP
Проверь требования в README проекта. Типовая конфигурация клиента, использующего поле mcpServers, выглядит так:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}Не вставляй JSON в произвольный файл: место и формат настроек зависят от клиента. Например, VS Code использует собственную структуру MCP-конфигурации. В официальном README есть инструкции для поддерживаемых приложений.
@latest удобно для первого знакомства. Для воспроизводимого командного окружения зафиксируй проверенную версию пакета. После подключения убедись, что клиент показывает сервер и его инструменты. Если нет — проверь доступность Node.js и npx, путь к конфигурации и журнал запуска.
Шаг 3. Дай агенту ограниченную задачу
Открой https://example.com в подключённом браузере.
Прочитай заголовок и адрес ссылки на странице.
Верни заголовок, URL страницы и найденную ссылку.
Не заполняй формы, не авторизуйся и ничего не отправляй.
Если страницу не удалось прочитать, сообщи об ошибке.Результат можно проверить глазами: агент должен описать текущую страницу, а не воспроизвести её по памяти. Для своего тестового сайта добавь контрольную строку, известную только из текущего HTML, и попроси её найти.
Шаг 4. Настрой цикл наблюдения
Хороший сценарий устроен так: прочитать состояние, выбрать доступный элемент, выполнить действие, проверить новое состояние. После перехода старые идентификаторы элементов могут больше не соответствовать странице.
Если кнопка не сработала, агент должен проверить причину: перекрывающий диалог, отключённое состояние, задержку или смену страницы. Бесконечный повтор клика не делает сценарий надёжнее. Для критичного шага проверяй результат по наблюдаемому признаку: URL, тексту подтверждения или сохранённой записи.
Шаг 5. Раздели доступы и проверку результата
Для первого эксперимента используй отдельный профиль и учебные данные. Доступ к браузеру с рабочими cookies может означать доступ к корпоративным сервисам. Инструкция «ничего не удалять» полезна, но технические права задаются профилем, аккаунтом и настройками инструментов.
Текст страницы может содержать команды, адресованные агенту. Его следует обрабатывать как содержимое сайта, а не разрешение отправлять данные или менять настройки. Перед финансовыми действиями, публикацией и изменением доступа оставь явную проверку человеком.
Скачать конфигурацию и сценарий проверки. Если процесс повторяется, оформи его в skill, а критерии результата — в небольшой eval.
Идея материала — из поста Михаила Карпова в todo2go. Практические примеры в руководстве учебные, если не указано иное.
Собери своего ИИ-агента и проверь результат
«AI Agents: от vibe coding к AI-команде»: desktop agents, MCP, skills, evals и harness. Отдельные воркшопы — от подключения инструментов до контроля качества.
7 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗