🏠 Главная › user guide › web development page agent

{/ Эта страница автоматически создается на основе файла SKILL.md навыка с помощью сайта site/scripts/generate-skill-docs.py. Редактируйте исходный код SKILL.md, а не эту страницу. /}

Агент страницы

Встройте Alibaba/page-agent в свое собственное веб-приложение — внутристраничный агент с графическим интерфейсом на чистом JavaScript, который поставляется в виде одного тега <script> или пакета npm и позволяет конечным пользователям вашего сайта управлять пользовательским интерфейсом на естественном языке («нажмите кнопку входа, введите имя пользователя как John»). Никакого Python, никакого headless-браузера и никаких расширений. Используйте этот навык, когда пользователь является веб-разработчиком, который хочет добавить второго пилота AI в свой SaaS/панель администратора/инструмент B2B, сделать устаревшее веб-приложение доступным на естественном языке или сравнить агент страницы с локальным (Ollama) или облачным (Qwen/OpenAI/OpenRouter) LLM. НЕ для автоматизации браузера на стороне сервера — вместо этого укажите этим пользователям встроенный инструмент браузера Hermes.

Метаданные навыков
Источник Необязательно — установите с помощью hermesskills installofficial/web-development/page-agent
Путь дополнительные навыки/веб-разработка/страниц-агент
Версия 1.0.0
Автор Агент Гермес
Лицензия Массачусетский технологический институт
Платформы Linux, MacOS, Windows
Теги web, javascript, агент, браузер, gui, alibaba, embed, copilot, saas

Ссылка: полная версия SKILL.md:::информация

Ниже приведено полное определение навыка, которое Гермес загружает при активации этого навыка. Это то, что агент видит в качестве инструкций, когда навык активен.

пейдж-агент

Alibaba/page-agent (https://github.com/alibaba/page-agent, более 17 тысяч звезд, Массачусетский технологический институт) — это внутристраничный агент с графическим интерфейсом, написанный на TypeScript. Он находится внутри веб-страницы, читает DOM как текст (без снимков экрана, без мультимодального LLM) и выполняет инструкции на естественном языке, такие как «нажмите кнопку входа в систему, затем введите имя пользователя как Джон» на текущей странице. Чисто на стороне клиента — хост-сайт просто включает скрипт и передает конечную точку LLM, совместимую с OpenAI.

Когда использовать этот навык

Загрузите этот навык, когда пользователь хочет:

Когда НЕ использовать этот навык

Предварительные условия

Путь 1 — 30-секундная демонстрация через CDN (без установки)

Самый быстрый способ увидеть, как это работает. Использует бесплатный прокси-сервер LLM для тестирования Alibaba — только для ознакомления, в соответствии с их условиями.

Добавьте на любую HTML-страницу (или вставьте в консоль devtools как букмарклет):

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

Появится панель. Введите инструкцию. Сделанный.

Форма букмарклета (закиньте на панель закладок, нажмите на любую страницу):

javascript:(function(){var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/page-agent@1.8.0/dist/iife/page-agent.demo.js';document.head.appendChild(s);})();

Путь 2 — установка npm в собственное веб-приложение (использование в рабочей среде)

Внутри существующего веб-проекта (React/Vue/Svelte/plain):

npm install page-agent

Подключите его к собственной конечной точке LLM — никогда не отправляйте демонстрационную CDN реальным пользователям:

import { PageAgent } from 'page-agent'

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

// Show the panel for end users:
agent.panel.show()

// Or drive it programmatically:
await agent.execute('Click submit button, then fill username as John')

Примеры провайдеров (подойдет любая конечная точка, совместимая с OpenAI):

Провайдер baseURL модель
Квен / DashScope https://dashscope.alyuncs.com/совместимый-режим/v1 qwen3.5-plus
ОпенАИ https://api.openai.com/v1 gpt-4o-мини
Оллама (местный) http://localhost:11434/v1 qwen3:14b
OpenRouter https://openrouter.ai/api/v1 антропный/Клод-сонет-4.6

Ключевые поля конфигурации (передаются в new PageAgent({...})):

Безопасность. Не помещайте свой apiKey в код на стороне клиента для реального развертывания — прокси-сервер LLM вызывает через ваш сервер и указывает baseURL на ваш прокси. Демонстрационный CDN существует, потому что Alibaba использует этот прокси для оценки.

Путь 3 — клонировать исходный репозиторий (внести в него вклад или взломать его)

Используйте это, когда пользователь хочет изменить сам агент страницы, протестировать его на произвольных сайтах через локальный пакет IIFE или разработать расширение для браузера.

git clone https://github.com/alibaba/page-agent.git
cd page-agent
npm ci              # exact lockfile install (or `npm i` to allow updates)

Создайте .env в корне репо с конечной точкой LLM. Пример:

LLM_MODEL_NAME=gpt-4o-mini
LLM_API_KEY=sk-...
LLM_BASE_URL=https://api.openai.com/v1

Вкус олламы:

LLM_BASE_URL=http://localhost:11434/v1
LLM_API_KEY=NA
LLM_MODEL_NAME=qwen3:14b

Общие команды:

npm start           # docs/website dev server
npm run build       # build every package
npm run dev:demo    # serve IIFE bundle at http://localhost:5174/page-agent.demo.js
npm run dev:ext     # develop the browser extension (WXT + React)
npm run build:ext   # build the extension

Протестируйте на любом веб-сайте, используя местный пакет IIFE. Добавьте этот букмарклет:

javascript:(function(){var s=document.createElement('script');s.src=`http://localhost:5174/page-agent.demo.js?t=${Math.random()}`;s.onload=()=>console.log('PageAgent ready!');document.head.appendChild(s);})();

Затем: npm run dev:demo, щелкните букмарклет на любой странице, и будет внедрена локальная сборка. Автоматическое восстановление при сохранении.

Внимание: ваш .env LLM_API_KEY встроен в пакет IIFE во время разработки. Не делитесь пакетом. Не совершайте этого. Не вставляйте URL-адрес в Slack. (Проверено: поиск общедоступного пакета разработки возвращает литеральные значения из .env.)

Макет репозитория (Путь 3)

Монорепо с рабочими пространствами npm. Ключевые пакеты:

Пакет Путь Цель
page-агент пакеты/страница-агент/ Главный вход с панелью пользовательского интерфейса
@page-agent/core пакеты/ядро/ Основная логика агента, без пользовательского интерфейса
@page-agent/mcp пакеты/mcp/ Сервер MCP (бета)
— пакеты/llms/ LLM-клиент
— пакеты/контроллер страниц/ Операции DOM + визуальная обратная связь
— пакеты/ui/ Панель + i18n
— пакеты/расширение/ Расширение Chrome/Firefox
— пакеты/веб-сайт/ Документы + лендинг

Проверка работоспособности

После пути 1 или пути 2: 1. Откройте страницу в браузере с открытыми инструментами разработчика. 2. Вы должны увидеть плавающую панель. Если нет, проверьте консоль на наличие ошибок (чаще всего: CORS на конечной точке LLM, неправильный baseURL или неверный ключ API). 3. Введите простую инструкцию, соответствующую тому, что отображается на странице («нажмите ссылку «Войти»). 4. Посмотрите вкладку «Сеть» — вы должны увидеть запрос к вашему «baseURL».

После пути 3: 1. npm run dev:demo печатает Принятие подключений по адресу http://localhost:5174 2. curl -I http://localhost:5174/page-agent.demo.js возвращает HTTP/1.1 200 OK с Content-Type: application/javascript 3. Нажмите на букмарклет на любом сайте; появляется панель

Подводные камни

Ссылка