Допустим, у вас есть веб-приложение. SaaS, CRM, админка интернет-магазина — что угодно, где пользователь вынужден методично перещелкивать поля и кнопки. Вы хотите добавить туда что-то вроде «Кликни подтвердить заказ и заполни адрес из профиля», но переписывать бэкенд и нанимать ML-команду некогда. Или бюджет не резиновый. Или и то и другое.

Ровно в эту боль метит PageAgent от Alibaba — JavaScript-агент, который встраивается в страницу буквально одной строкой, получает на вход текст на естественном языке и начинает сам методично нажимать кнопки и заполнять поля. Это не скриншотер, не headless-браузер в облаке и не тяжелая Python-связка. Просто скрипт, который живет прямо на вашей странице и читает DOM.

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

Если просто

PageAgent — это AI-агент для управления интерфейсом через естественный язык. Он встраивается прямо в HTML-страницу обычным тегом <script>, а дальше либо показывает плавающую панельку для ввода команд (в демо-режиме), либо слушается ваши вызовы из JavaScript.

Чтобы понять, что нажимать и куда вводить текст, он не делает скриншоты и не гоняет тяжелую мультимодальную модель. Он просто читает DOM — ту самую структуру документа, которую браузер строит из HTML. Находит кнопки, поля ввода, выпадающие списки, смотрит на их подписи и атрибуты. А дальше — сам решает последовательность действий.

При этом LLM-модель можно принести свою: хоть OpenAI, хоть локальную через совместимый API. В демо-режиме Alibaba отдает бесплатную тестовую модель, но предупреждает — только для оценки, не для продакшена.

Что это решает

Ключевая боль здесь — это разрыв между «у нас есть рабочая админка» и «давайте добавим туда AI-помощника». Обычно для этого приходится либо переписывать логику на бэкенде, либо городить отдельный слой headless-браузеров, которые ходят по страницам как внешние роботы. Это дорого, медленно и сложно поддерживать.

PageAgent предлагает третий путь: вы оставляете свое приложение как есть, просто даете агенту доступ к DOM изнутри. С точки зрения браузера это обычный JavaScript, который выполняется в том же окружении, что и ваши кнопки с формами. Никаких отдельных контейнеров с Chrome, никакой проброски сессий.

И это работает не только для копилотов. Представьте: тестировщик пишет «пройди онбординг и проверь, что поле email подсвечивается красным на пустом значении», и агент сам проходит flow. Или пользователь с ограниченными возможностями диктует голосом (через сторонний speech-to-text) «открой настройки, раздел уведомления, выключи email-рассылку» — и агент делает это за него.

Как попробовать

Если хочется просто потыкать руками, самый быстрый способ — демо-режим. Открываете любую свою страницу (или создаете простой HTML-файл), вставляете один тег:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js" crossorigin="true"></script>

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

Если нужно встроить в свой проект серьезно, ставите через npm:

npm install page-agent

И дальше из кода:

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'gpt-4o',
    baseURL: 'https://api.openai.com/v1',
    apiKey: process.env.OPENAI_API_KEY,
    language: 'ru-RU',
})

await agent.execute('Нажми кнопку "Создать заказ"')

После вызова execute агент сам прочитает текущее состояние DOM, поймет, где эта кнопка, и кликнет. Никаких селекторов вы не передаете — он их находит сам. Хотя, конечно, если верстка кривая и кнопка называется <div onclick="...">, тут уже сложнее.

3 сценария с примерами

1. Умная форма заказа в CRM. Менеджер открывает карточку клиента, а вместо ручного заполнения 12 полей пишет в чат-панели: «Создай заказ из последнего счета, доставку поставь на адрес из профиля, способ оплаты — безнал, комментарий: срочно». PageAgent проходит по DOM, находит поле «адрес доставки», копирует туда данные из профиля клиента, выбирает radio-button «безналичный расчет», вставляет комментарий. Менеджер экономит по 30 секунд на каждом заказе, а за день таких заказов — десятки.

2. Самотестирование онбординга. QA-инженер подключает PageAgent на staging-окружение и пишет: «Пройди регистрацию с email [email protected], пароль Test1234, имя Тест, и проверь, что появилось сообщение об ошибке валидации телефона». Агент последовательно проходит все шаги, а инженер видит результат. Не надо писать Playwright-скрипты на каждый кейс — просто описываешь сценарий на человеческом языке.

3. Голосовая навигация в сложной админке. Пользователь с нарушениями моторики открывает админку интернет-магазина и диктует: «Открой раздел товары, фильтр по категории электроника, отсортируй по цене». Speech-to-text (отдельный компонент) превращает это в текст, текст уходит в PageAgent, агент выполняет навигацию по DOM. Без переписывания интерфейса под accessibility tree — просто естественный язык как прослойка.

Где можно застрять

Первое и главное: модель может ошибаться. Это не детерминированный скрипт — если в DOM десяток кнопок с одинаковой подписью или элементы генерируются динамически без уникальных атрибутов, агент может кликнуть не туда. В README честно пишут, что подход «text-based DOM manipulation» выигрывает по легкости интеграции, но проигрывает визуальным подходам на сложных нестандартных интерфейсах.

Второе: модель по умолчанию — это бесплатная тестовая от Alibaba, и она может быть медленной или нестабильной. Для реального использования придется подключать свою LLM, а это уже деньги. На каждом вызове execute агент делает запрос к API, и если сценарий сложный, токенов уходит прилично.

Третье: безопасность. Агент выполняется в контексте страницы и имеет доступ ко всему DOM — по сути, это XSS как фича. Если злоумышленник сможет инжектить команды в агента (например, через ваш же чат-интерфейс), он сможет дергать API от имени пользователя. Разработчикам придется самим продумывать фильтрацию интентов.

Четвертое: Chrome-расширение для мультистраничных задач и MCP-сервер пока в бете. Если вам нужно, чтобы агент переходил между разными вкладками или сайтами, прямо сейчас это может работать нестабильно.

Кому это нужно

В первую очередь — SaaS-стартапам и продуктам, которые хотят быстро получить AI-copilot в своем интерфейсе. Если у вас уже есть большое веб-приложение с кучей форм и workflows, и переписывать его ради AI-фич нет возможности, PageAgent дает очень короткий путь от идеи до прототипа.

Во вторую — тестировщикам и QA-командам, которые устали поддерживать зоопарк end-to-end тестов. Описывать сценарии на естественном языке проще и быстрее, чем писать селекторы для каждого нового релиза.

В третью — всем, кто занимается accessibility и хочет дать пользователям альтернативный способ навигации без глубокой переработки интерфейса.

Кому это не нужно

Если вам нужна гарантированная надежность в духе «кликни ровно по этой кнопке с этим XPath» — лучше оставаться на Playwright или Selenium. PageAgent не дает детерминированного контроля над действиями.

Если ваш интерфейс состоит из Canvas, WebGL или кастомных элементов без внятной DOM-структуры, агент просто не поймет, куда нажимать. Текстовая модель не видит картинку.

Если вы хотите автоматизировать внешние сайты, которые вам не принадлежат, и обходить их защиту — PageAgent не про это. Он живет на странице, которую вы контролируете, и не притворяется обычным пользователем на чужом сервере.

Вердикт Веры

PageAgent — это очень вовремя. Пока одни стартапы пытаются строить AI-агентов как отдельных виртуальных пользователей с браузерами в облаке, Alibaba предлагает более легкий путь: просто дайте ИИ-модели прочитать DOM. Для

Что читать дальше

Материалы