PageAgent — GUI-агент, который живёт прямо на веб-странице

PageAgent — открытый проект Alibaba, который добавляет AI-агента прямо на веб-страницу. Один скрипт — и у сайта появляется собственный GUI-агент: он понимает команды на естественном языке, сам нажимает кнопки, заполняет формы и переходит по ссылкам. Библиотека написана на TypeScript и распространяется по лицензии MIT.

Чем PageAgent отличается от других браузерных агентов

Большинство браузерных агентов смотрят на страницу снаружи. Они запускают headless-браузер или управляют расширением, делают скриншоты и отправляют картинки в мультимодальную LLM. Отсюда требования: отдельный процесс, режим скриншотов, модель, которая умеет видеть изображения.

PageAgent работает изнутри страницы. Это обычный JavaScript-код, который подключается к сайту как часть интерфейса. Агент читает DOM в текстовом виде и управляет элементами напрямую. Скриншоты не нужны. Мультимодальные модели не нужны. Особые разрешения браузера тоже не нужны.

Из такого подхода следуют три практических вывода:

• Подходит любая текстовая LLM, включая модели, развёрнутые локально.
• Агент живёт внутри страницы, поэтому видит её данные и события.
• Внедрение сводится к одной строке кода. Переписывать бэкенд не нужно.

Авторы отдельно подчёркивают назначение: PageAgent создан для улучшения страниц на стороне клиента, а не для серверной автоматизации браузера.

Краткое сравнение двух подходов:

Ключевые возможности

• Простое внедрение. Не нужны браузерное расширение, Python и headless-браузер. Всё происходит внутри веб-страницы.
• Текстовая работа с DOM. Агент не делает скриншоты. Ему не нужны мультимодальные LLM и специальные разрешения.
• Своя модель. Работает большинство популярных моделей, включая локально развёрнутые. Список поддержанных вариантов — в разделе моделей документации.
• Расширение для Chrome. Опциональный Chrome extension позволяет агенту работать сразу с несколькими вкладками.
• MCP-сервер. В бета-версии доступен MCP Server — браузером можно управлять извне, из клиентских агентов.

Где это пригодится

Авторы описывают пять основных сценариев.

AI-помощник в SaaS. Копилот внутри продукта добавляется несколькими строками кода. Бэкенд переписывать не нужно — агент работает с тем интерфейсом, который уже есть.

Умное заполнение форм. Рабочий процесс из двадцати кликов заменяется одной фразой. Авторы видят здесь применение для ERP, CRM и административных панелей.

Доступность. Любое веб-приложение становится управляемым через естественный язык. Это открывает путь к голосовым командам и интеграции со средствами чтения с экрана.

Агент для нескольких вкладок. Через Chrome extension агент выходит за пределы одной страницы и решает задачи во всём браузере.

MCP. Ваши клиентские агенты получают управление браузером как обычный инструмент.

Быстрый старт

Самый быстрый способ попробовать — подключить скрипт с бесплатной демо-моделью:

<script
    src="https://cdn.jsdelivr.net/npm/page-agent@1.12.4/dist/iife/page-agent.demo.js"
    crossorigin="anonymous"
></script>

Если jsDelivr недоступен, есть зеркало для Китая на npmmirror — путь тот же, меняется только домен: registry.npmmirror.com/page-agent/1.12.4/files/dist/iife/page-agent.demo.js.

Важная оговорка: демо-скрипт использует бесплатный тестовый API проекта. Авторы предупреждают, что он подходит только для технической оценки, а условия использования описаны отдельно.

Если добавить к адресу скрипта параметр ?autoInit=false, агент не запустится автоматически. Тогда его можно создать вручную через new window.PageAgent(...) и подключить собственную модель.

Для настоящего внедрения пакет ставится через npm:

npm install page-agent

Дальше агент создаётся в коде и получает задачу:

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'qwen3.5-plus',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    apiKey: 'YOUR_API_KEY',
    language: 'en-US',
})

await agent.execute('Click the login button')

Метод execute принимает задачу на естественном языке. Агент сам разбирает страницу, строит план и выполняет действия над DOM. В примере выше это клик по кнопке входа.

Подключение своей модели

PageAgent построен по принципу «bring your own LLM». Подходят большинство распространённых моделей — облачные и локальные. В примере выше используется модель qwen3.5-plus через API Dashscope, совместимый с форматом OpenAI. Настройка провайдеров и актуальный список моделей описаны в документации.

Chrome extension и MCP-сервер

Сам по себе агент ограничен одной страницей — и это осознанное ограничение для клиентского сценария. Два дополнения расширяют радиус действия.

Chrome extension подключается к обычному браузеру. Агент получает возможность работать с несколькими вкладками: открыть сайт в новой вкладке, сверить данные, вернуться обратно.

MCP-сервер идёт дальше. Он позволяет управлять браузером с PageAgent извне — по протоколу MCP. Ваш основной агент, например CLI-ассистент, поручает браузеру задачу: зайти на сайт, заполнить форму, нажать кнопку. Получается связка, где браузер становится исполнителем в руках агента.

Основа: browser-use

Проект построен на наработках browser-use — популярной библиотеки для автоматизации браузера. Компоненты обработки DOM и промпты взяты оттуда, и авторы явно указывают это в благодарностях с соблюдением лицензии MIT.

Разница — в точке приложения. browser-use автоматизирует браузер снаружи, со стороны сервера или скрипта. PageAgent берёт те же паттерны работы с DOM, но живёт внутри страницы и служит для улучшения интерфейса на стороне клиента.

Лицензия и участие в проекте

Лицензия MIT разрешает свободное использование в коммерческих проектах. Команда принимает вклад от сообщества, но с одной жёсткой оговоркой: пул-реквесты, полностью созданные ботами или AI без существенного участия человека, не принимаются.

Ссылки

• Демо — агент прямо в браузере
• Документация — обзор, модели, расширения
• Обсуждение на Hacker News
• Пакет page-agent на npm