Alibaba Page Agent: управляй вебом на естественном языке

Что такое Page Agent и почему это важно

Alibaba Page Agent — открытый JavaScript-агент (GUI agent, агент графического интерфейса), встроенный прямо в страницу: он читает DOM и выполняет команды на естественном языке. Alibaba пошла принципиально иным путём, чем конкуренты: агент живёт внутри веб-страницы как чистый JavaScript, читает живой DOM в виде текста и действует как настоящий пользователь — без headless-браузера, без скриншотов, без мультимодальных моделей.

Проект взорвал GitHub Trending в начале 2026 года, набрав более 22 700 звёзд и свыше 1 100 новых звёзд в день на пике.

Архитектура: чем Page Agent отличается от Playwright и Puppeteer

Большинство инструментов браузерной автоматизации работают снаружи: Playwright, Puppeteer, Selenium и browser-use управляют браузером из внешнего процесса и читают страницу через скриншоты или Chrome DevTools Protocol.

Ключевая техника Page Agent называется DOM dehydration (дегидрация DOM): современная страница может содержать тысячи узлов, и отправлять сырой HTML в модель было бы медленно и дорого. Дегидрация сжимает страницу в компактное дерево FlatDomTree, что позволяет небольшим текстовым моделям действовать точно.

Поскольку агент работает внутри браузерной сессии, он наследует куки, сессию и аутентификацию пользователя — никакой отдельной бэкенд-инфраструктуры писать не нужно, а существующая валидация UI и правила безопасности остаются в силе.

ℹ Принцип работы

Page Agent не делает скриншоты и не использует компьютерное зрение. Вся логика строится на текстовом анализе DOM: агент извлекает интерактивные элементы (кнопки, ссылки, поля ввода), формирует из них структурированное представление и передаёт его в LLM.

Как выглядит цикл работы агента


graph TD
    A[Пользователь вводит команду на естественном языке] --> B[PageController извлекает DOM]
    B --> C[DOM dehydration → FlatDomTree]
    C --> D[LLM получает текстовое дерево + команду]
    D --> E[LLM возвращает JSON-действие]
    E --> F[PageController выполняет действие на странице]
    F --> G{Задача выполнена?}
    G -- Нет --> B
    G -- Да --> H[Результат показан пользователю]

Быстрый старт: одна строка кода

Буквально одна строка кода превращает сайт в AI-native приложение: пользователь отдаёт команды на естественном языке — ИИ делает всё остальное.

Для тестирования достаточно подключить демо-скрипт через CDN:

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

Для продакшн-интеграции через npm:

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')

⚠ Важно для продакшна

API-ключ, переданный в new PageAgent, попадёт в клиентский бандл. В продакшне проксируйте запросы через собственный бэкенд.

Поддерживаемые LLM

Page Agent не привязан к конкретной модели: вы подключаете любой LLM через OpenAI-совместимый endpoint, и достаточно мощной текстовой модели — мультимодальность не требуется.

Работают любые текстовые LLM с OpenAI-совместимым API: GPT-4o, GPT-4.1, Claude Sonnet/Opus, Qwen 3, Llama 3, Mistral, DeepSeek и локальные модели через Ollama.

Провайдер	Модели	Локально
OpenAI	GPT-4o, GPT-4.1, GPT-5.4	Нет
Anthropic	Claude Sonnet, Opus	Нет
Alibaba	Qwen 3, Qwen 3.5-plus	Нет
Meta / open	Llama 3	Через Ollama
DeepSeek	DeepSeek v4 Flash/Pro	Через Ollama
Mistral	Mistral	Через Ollama

Сценарии применения

SaaS AI Copilot

Встроенный AI-ассистент для вашего продукта — за часы, а не месяцы, без переписывания бэкенда.

Умное заполнение форм

ERP, CRM и административные панели печально известны сложными многошаговыми формами. Page Agent превращает 20-кликовый сценарий в одну фразу: «Создай нового клиента John Smith из Acme Corp с email john@acme.com и отправь».

Доступность (Accessibility)

Эффект выходит далеко за рамки удобства: доступность веба кардинально улучшается, когда пользователи управляют интерфейсами голосом или обычным текстом — это особенно важно для людей с моторными или зрительными нарушениями.

Тестирование

Тесты пишутся на обычном английском вместо хрупких CSS-селекторов. Если текст кнопки изменится с «Submit» на «Send», тест на естественном языке по-прежнему сработает.

📝 Тест на естественном языке

await agent.execute('Navigate to the settings page')
await agent.execute('Toggle dark mode on')
await agent.execute('Verify the theme has changed to dark')

Тест не сломается при рефакторинге UI — агент понимает намерение, а не ищет конкретный селектор.

Multi-page и MCP-интеграция

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

Beta-пакет @page-agent/mcp позволяет MCP-клиентам — например, Claude Desktop и Copilot — управлять браузером через Page Agent. Это открывает сценарий, при котором внешний AI-агент отдаёт команды браузеру, не имея прямого доступа к DOM.

Page Agent — это недостающий слой между намерением пользователя и существующим веб-интерфейсом: тонкая, LLM-powered прослойка, которая не требует переписывать сам интерфейс.

Ограничения и безопасность

Prompt-based безопасность имеет свои пределы: правила вроде «никогда не отправляй платёжную форму автоматически» живут в системном промпте и являются рекомендательными, а не жёсткими гарантиями. Для чувствительных или разрушительных действий нужна серверная валидация — инструкции в промпте не должны быть единственным средством контроля.

Клиентские AI-агенты, читающие DOM, открывают заметную поверхность атаки. Наиболее серьёзный риск — indirect prompt injection: вредоносный контент, встроенный в страницу (в комментарий, значение формы, динамическую рекламу), который инструктирует агента выполнить непредвиденные действия.

Page Agent не может решать CAPTCHA, работать с интерфейсами на основе изображений и не поддерживает горячие клавиши, контекстное меню правой кнопки мыши, а также ввод в некоторые content-editable-элементы — в частности, редактор постов Twitter/X.

💡 Совет по безопасности

Используйте параметры allowList (белый список разрешённых действий) и dataMask (маскирование чувствительных полей), чтобы ограничить то, что агент может видеть и делать в продакшн-среде.

Page Agent vs. традиционные инструменты автоматизации

Параметр	Page Agent	Playwright / Puppeteer	browser-use
Где работает	Внутри страницы (JS)	Внешний процесс	Внешний процесс (Python)
Скриншоты	Нет	Да	Да
Мультимодальный LLM	Не нужен	Нужен	Нужен
Python	Не нужен	Нет	Нужен
Интеграция	`<script>` / npm	npm / pip	pip
Наследует сессию браузера	Да	Нет	Нет
Multi-page	Через расширение	Нативно	Нативно

Итог: зачем это важно для отрасли

Alibaba Page Agent предлагает готовое к продакшну решение для разработки JavaScript GUI-агентов и управления вебом на естественном языке. Модель выполнения внутри страницы в сочетании с простой установкой и гибкой конфигурацией LLM снижает барьеры для AI-автоматизации DOM в самых разных отраслях.

Любой SaaS-вендор теперь может добавить интерфейс на естественном языке в свой продукт за один день. Любая корпоративная IT-команда может обернуть устаревший внутренний инструмент разговорным управлением, не трогая бэкенд. Именно этот тонкий, LLM-powered слой перевода между намерением человека и существующей веб-поверхностью — то, чего не хватало в экосистеме.

Page Agent распространяется по лицензии MIT и полностью бесплатен — вы платите только за тот LLM, который решите использовать.