# Агент, живущий прямо в вашей странице: PageAgent учит сайты понимать человеческую речь

- Site: VeraPoint News
- Section: Инструменты
- Date: 2026-06-26
- Canonical: https://verapointmedia.com/tools/alibaba-page-agent/
- Markdown: https://verapointmedia.com/tools/alibaba-page-agent.md
- Summary: Alibaba открыла PageAgent — JS-агента, который встраивается в страницу строкой и управляет интерфейсом через естественный язык. Без скриншотов и Python.
- SEO title: Агент, живущий прямо в вашей странице: браузерная отладка и проверка сайтов AI-агентом
- SEO description: Alibaba открыла PageAgent — JS-агента, который встраивается в страницу строкой и управляет интерфейсом через естественный язык. Без скриншотов и Python
- Target queries: Агент, живущий прямо в вашей странице; Агент, живущий прямо в вашей странице github; что такое Агент, живущий прямо в вашей странице; как использовать Агент, живущий прямо в вашей странице
- Tags: #agent #browser-automation #typescript #web #alibaba #mcp
- Image: https://verapointmedia.com/static/content-assets/tools/alibaba-page-agent/cover.webp

## Sources

- https://github.com/alibaba/page-agent
- https://alibaba.github.io/page-agent/
- https://page-agent.github.io/assets/readme/banner-dark.png
- https://alibaba.github.io/page-agent/docs/introduction/overview

---

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

Ровно в эту боль метит [PageAgent от Alibaba](https://github.com/alibaba/page-agent) — 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-файл), вставляете один тег:

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

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

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

```bash
npm install page-agent
```

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

```javascript
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 test@example.com, пароль 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. Для

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

- [Все материалы про AI-агентов](/topics/ai-agents/)
- [Что такое AI-агент простыми словами](https://verapointmedia.com/guides/chto-takoe-ai-agent-prostymi-slovami/)
- [Все материалы про AI-инструменты](/topics/ai-tools/)
- [Как отличить рабочий AI-инструмент от красивой демки](https://verapointmedia.com/guides/kak-otlichit-rabochiy-ai-instrument-ot-krasivoy-demki/)

## Материалы

- [alibaba/page-agent] alibaba/page-agent: https://github.com/alibaba/page-agent
- [alibaba.github.io] supporting context: https://alibaba.github.io/page-agent/
- [page-agent.github.io] supporting context: https://page-agent.github.io/assets/readme/banner-dark.png
- [alibaba.github.io] supporting context: https://alibaba.github.io/page-agent/docs/introduction/overview