{"title":"Агент, живущий прямо в вашей странице: PageAgent учит сайты понимать человеческую речь","url":"https://verapointmedia.com/tools/alibaba-page-agent/","markdownUrl":"https://verapointmedia.com/tools/alibaba-page-agent.md","language":"ru","category":"tools","publishedAt":"2026-06-26T08:30:04.000Z","updatedAt":"2026-06-26T08:30:04.000Z","references":["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"],"rights":"Public user-requested reading, summarization and citation allowed. Model training requires separate permission.","contentMarkdown":"# Агент, живущий прямо в вашей странице: PageAgent учит сайты понимать человеческую речь\n\n- Site: VeraPoint News\n- Section: Инструменты\n- Date: 2026-06-26\n- Canonical: https://verapointmedia.com/tools/alibaba-page-agent/\n- Markdown: https://verapointmedia.com/tools/alibaba-page-agent.md\n- Summary: Alibaba открыла PageAgent — JS-агента, который встраивается в страницу строкой и управляет интерфейсом через естественный язык. Без скриншотов и Python.\n- SEO title: Агент, живущий прямо в вашей странице: браузерная отладка и проверка сайтов AI-агентом\n- SEO description: Alibaba открыла PageAgent — JS-агента, который встраивается в страницу строкой и управляет интерфейсом через естественный язык. Без скриншотов и Python\n- Target queries: Агент, живущий прямо в вашей странице; Агент, живущий прямо в вашей странице github; что такое Агент, живущий прямо в вашей странице; как использовать Агент, живущий прямо в вашей странице\n- Tags: #agent #browser-automation #typescript #web #alibaba #mcp\n- Image: https://verapointmedia.com/static/content-assets/tools/alibaba-page-agent/cover.webp\n\n## Sources\n\n- https://github.com/alibaba/page-agent\n- https://alibaba.github.io/page-agent/\n- https://page-agent.github.io/assets/readme/banner-dark.png\n- https://alibaba.github.io/page-agent/docs/introduction/overview\n\n---\n\nДопустим, у вас есть веб-приложение. SaaS, CRM, админка интернет-магазина — что угодно, где пользователь вынужден методично перещелкивать поля и кнопки. Вы хотите добавить туда что-то вроде «Кликни подтвердить заказ и заполни адрес из профиля», но переписывать бэкенд и нанимать ML-команду некогда. Или бюджет не резиновый. Или и то и другое.\n\nРовно в эту боль метит [PageAgent от Alibaba](https://github.com/alibaba/page-agent) — JavaScript-агент, который встраивается в страницу буквально одной строкой, получает на вход текст на естественном языке и начинает сам методично нажимать кнопки и заполнять поля. Это не скриншотер, не headless-браузер в облаке и не тяжелая Python-связка. Просто скрипт, который живет прямо на вашей странице и читает DOM.\n\nКому читать: разработчикам, которые хотят прикрутить AI-copilot к своему веб-интерфейсу без перестройки архитектуры; продакт-менеджерам, которые примеряются к «волшебной» автоматизации форм. Кому можно пропустить: если вам нужен серверный парсинг или обход капчи из дата-центра — это не сюда.\n\n## Если просто\n\nPageAgent — это AI-агент для управления интерфейсом через естественный язык. Он встраивается прямо в HTML-страницу обычным тегом `<script>`, а дальше либо показывает плавающую панельку для ввода команд (в демо-режиме), либо слушается ваши вызовы из JavaScript.\n\nЧтобы понять, что нажимать и куда вводить текст, он не делает скриншоты и не гоняет тяжелую мультимодальную модель. Он просто читает DOM — ту самую структуру документа, которую браузер строит из HTML. Находит кнопки, поля ввода, выпадающие списки, смотрит на их подписи и атрибуты. А дальше — сам решает последовательность действий.\n\nПри этом LLM-модель можно принести свою: хоть OpenAI, хоть локальную через совместимый API. В демо-режиме Alibaba отдает бесплатную тестовую модель, но предупреждает — только для оценки, не для продакшена.\n\n## Что это решает\n\nКлючевая боль здесь — это разрыв между «у нас есть рабочая админка» и «давайте добавим туда AI-помощника». Обычно для этого приходится либо переписывать логику на бэкенде, либо городить отдельный слой headless-браузеров, которые ходят по страницам как внешние роботы. Это дорого, медленно и сложно поддерживать.\n\nPageAgent предлагает третий путь: вы оставляете свое приложение как есть, просто даете агенту доступ к DOM изнутри. С точки зрения браузера это обычный JavaScript, который выполняется в том же окружении, что и ваши кнопки с формами. Никаких отдельных контейнеров с Chrome, никакой проброски сессий.\n\nИ это работает не только для копилотов. Представьте: тестировщик пишет «пройди онбординг и проверь, что поле email подсвечивается красным на пустом значении», и агент сам проходит flow. Или пользователь с ограниченными возможностями диктует голосом (через сторонний speech-to-text) «открой настройки, раздел уведомления, выключи email-рассылку» — и агент делает это за него.\n\n## Как попробовать\n\nЕсли хочется просто потыкать руками, самый быстрый способ — демо-режим. Открываете любую свою страницу (или создаете простой HTML-файл), вставляете один тег:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js\" crossorigin=\"true\"></script>\n```\n\nИ у вас в углу появляется плавающая иконка. Нажимаете — открывается чат-панель, где можно написать что-то вроде «кликни вход» или «заполни форму регистрации тестовыми данными». Агент сам разберется, где какие элементы.\n\nЕсли нужно встроить в свой проект серьезно, ставите через npm:\n\n```bash\nnpm install page-agent\n```\n\nИ дальше из кода:\n\n```javascript\nimport { PageAgent } from 'page-agent'\n\nconst agent = new PageAgent({\n    model: 'gpt-4o',\n    baseURL: 'https://api.openai.com/v1',\n    apiKey: process.env.OPENAI_API_KEY,\n    language: 'ru-RU',\n})\n\nawait agent.execute('Нажми кнопку \"Создать заказ\"')\n```\n\nПосле вызова `execute` агент сам прочитает текущее состояние DOM, поймет, где эта кнопка, и кликнет. Никаких селекторов вы не передаете — он их находит сам. Хотя, конечно, если верстка кривая и кнопка называется `<div onclick=\"...\">`, тут уже сложнее.\n\n## 3 сценария с примерами\n\n**1. Умная форма заказа в CRM.** Менеджер открывает карточку клиента, а вместо ручного заполнения 12 полей пишет в чат-панели: «Создай заказ из последнего счета, доставку поставь на адрес из профиля, способ оплаты — безнал, комментарий: срочно». PageAgent проходит по DOM, находит поле «адрес доставки», копирует туда данные из профиля клиента, выбирает radio-button «безналичный расчет», вставляет комментарий. Менеджер экономит по 30 секунд на каждом заказе, а за день таких заказов — десятки.\n\n**2. Самотестирование онбординга.** QA-инженер подключает PageAgent на staging-окружение и пишет: «Пройди регистрацию с email test@example.com, пароль Test1234, имя Тест, и проверь, что появилось сообщение об ошибке валидации телефона». Агент последовательно проходит все шаги, а инженер видит результат. Не надо писать Playwright-скрипты на каждый кейс — просто описываешь сценарий на человеческом языке.\n\n**3. Голосовая навигация в сложной админке.** Пользователь с нарушениями моторики открывает админку интернет-магазина и диктует: «Открой раздел товары, фильтр по категории электроника, отсортируй по цене». Speech-to-text (отдельный компонент) превращает это в текст, текст уходит в PageAgent, агент выполняет навигацию по DOM. Без переписывания интерфейса под accessibility tree — просто естественный язык как прослойка.\n\n## Где можно застрять\n\nПервое и главное: модель может ошибаться. Это не детерминированный скрипт — если в DOM десяток кнопок с одинаковой подписью или элементы генерируются динамически без уникальных атрибутов, агент может кликнуть не туда. В README честно пишут, что подход «text-based DOM manipulation» выигрывает по легкости интеграции, но проигрывает визуальным подходам на сложных нестандартных интерфейсах.\n\nВторое: модель по умолчанию — это бесплатная тестовая от Alibaba, и она может быть медленной или нестабильной. Для реального использования придется подключать свою LLM, а это уже деньги. На каждом вызове `execute` агент делает запрос к API, и если сценарий сложный, токенов уходит прилично.\n\nТретье: безопасность. Агент выполняется в контексте страницы и имеет доступ ко всему DOM — по сути, это XSS как фича. Если злоумышленник сможет инжектить команды в агента (например, через ваш же чат-интерфейс), он сможет дергать API от имени пользователя. Разработчикам придется самим продумывать фильтрацию интентов.\n\nЧетвертое: Chrome-расширение для мультистраничных задач и MCP-сервер пока в бете. Если вам нужно, чтобы агент переходил между разными вкладками или сайтами, прямо сейчас это может работать нестабильно.\n\n## Кому это нужно\n\nВ первую очередь — SaaS-стартапам и продуктам, которые хотят быстро получить AI-copilot в своем интерфейсе. Если у вас уже есть большое веб-приложение с кучей форм и workflows, и переписывать его ради AI-фич нет возможности, PageAgent дает очень короткий путь от идеи до прототипа.\n\nВо вторую — тестировщикам и QA-командам, которые устали поддерживать зоопарк end-to-end тестов. Описывать сценарии на естественном языке проще и быстрее, чем писать селекторы для каждого нового релиза.\n\nВ третью — всем, кто занимается accessibility и хочет дать пользователям альтернативный способ навигации без глубокой переработки интерфейса.\n\n## Кому это не нужно\n\nЕсли вам нужна гарантированная надежность в духе «кликни ровно по этой кнопке с этим XPath» — лучше оставаться на Playwright или Selenium. PageAgent не дает детерминированного контроля над действиями.\n\nЕсли ваш интерфейс состоит из Canvas, WebGL или кастомных элементов без внятной DOM-структуры, агент просто не поймет, куда нажимать. Текстовая модель не видит картинку.\n\nЕсли вы хотите автоматизировать внешние сайты, которые вам не принадлежат, и обходить их защиту — PageAgent не про это. Он живет на странице, которую вы контролируете, и не притворяется обычным пользователем на чужом сервере.\n\n## Вердикт Веры\n\nPageAgent — это очень вовремя. Пока одни стартапы пытаются строить AI-агентов как отдельных виртуальных пользователей с браузерами в облаке, Alibaba предлагает более легкий путь: просто дайте ИИ-модели прочитать DOM. Для\n\n## Что читать дальше\n\n- [Все материалы про AI-агентов](/topics/ai-agents/)\n- [Что такое AI-агент простыми словами](https://verapointmedia.com/guides/chto-takoe-ai-agent-prostymi-slovami/)\n- [Все материалы про AI-инструменты](/topics/ai-tools/)\n- [Как отличить рабочий AI-инструмент от красивой демки](https://verapointmedia.com/guides/kak-otlichit-rabochiy-ai-instrument-ot-krasivoy-demki/)\n\n## Материалы\n\n- [alibaba/page-agent] alibaba/page-agent: https://github.com/alibaba/page-agent\n- [alibaba.github.io] supporting context: https://alibaba.github.io/page-agent/\n- [page-agent.github.io] supporting context: https://page-agent.github.io/assets/readme/banner-dark.png\n- [alibaba.github.io] supporting context: https://alibaba.github.io/page-agent/docs/introduction/overview\n"}