Page Agent

The GUI Agent Living in Your Webpage. 自然言語で Web インターフェースを操作する。

1 — 概要
何か

Page Agent は Alibaba が公開している、ウェブページ内で動く GUI エージェント。拡張機能や Python・ヘッドレスブラウザは不要で、ページに 1 本のスクリプトを足すだけで、自然言語の指示でクリック・入力・ナビゲーションを行える。DOM をテキストベースで扱うためスクリーンショットや OCR は不要で、持込 LLM（Bring your own LLM） に対応している。クライアントサイドの Web 強化向けであり、サーバー側の自動化用途ではない。

In-page拡張不要
DOMテキスト操作
LLM持込可能
PanelHuman-in-the-loop

技術的には browser-use の DOM 処理・プロンプトをベースにしている（謝辞は公式 README 参照）。

2 — パッケージ構成
モノレポ

公開 npm パッケージは page-agent のみ。内部はモノレポで、@page-agent/core・@page-agent/page-controller・@page-agent/ui・@page-agent/llms などに分かれている。

パッケージ役割
page-agentメインエントリ。PageAgent = PageAgentCore + PageController + Panel（UI）。
@page-agent/coreエージェント中核（PageAgentCore）。LLM と PageController を組み合わせてタスク実行。
@page-agent/page-controllerDOM 取得・操作。viewport やマスクなど設定可能。
@page-agent/ui操作パネル（Panel）。言語設定など。
@page-agent/llmsLLM 呼び出しの抽象。
@page-agent/extensionChrome 拡張。複数タブでのマルチページエージェント用（オプション）。
3 — 特徴・ユースケース
特徴
  • 簡単な組み込み — 拡張機能・Python・ヘッドレス不要。ページ内 JavaScript のみ。
  • テキストベースの DOM 操作 — スクショ・OCR・マルチモーダル LLM 不要。特別な権限も不要。
  • 持込 LLM — 自前の API キーとエンドポイントで利用可能。
  • Human-in-the-loop — パネル UI で確認・承認しながら実行できる。
  • Chrome 拡張（オプション） — 複数タブにまたがるタスク用。
ユースケース
  • SaaS AI Copilot — 自製品に AI コパイロットを数行で組み込む。バックエンドの書き換えは不要。
  • スマートフォーム入力 — 多数クリックが必要なワークフローを一文で実行。ERP・CRM・管理画面向け。
  • アクセシビリティ — 音声コマンドやスクリーンリーダーと組み合わせて、言語で操作できる UI に。
  • マルチページエージェント — 拡張機能でタブをまたいだ操作が可能。
4 — クイックスタート
1 行組み込み（デモ用）

公式の無料デモ LLM を使う場合は、次の script タグだけで試せる。技術評価用であり、利用規約に同意した上で利用すること。

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.2/dist/iife/page-agent.demo.js" crossorigin="true"></script>
NPM + プログラム利用 
npm install page-agent
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')

PageAgentConfig は AgentConfig（LLM 設定・言語など）と PageControllerConfig（DOM・viewport 等）の交差型。詳細は公式ドキュメントを参照。

公式・関連