WebアプリにAIコパイロットを載せるには、Playwrightのような外部自動化やマルチモーダルLLMが必要だと思い込みがちです。Alibabaがオープンソース化したPageAgentは、その前提を覆します。JavaScriptをページ内に埋め込むだけで、ユーザーは自然言語からボタン操作やフォーム入力を指示できます。
この記事では、PageAgentの仕組みと導入方法、従来のブラウザ自動化との違い、導入時の注意点を整理します。
この記事でわかること
- PageAgentがページ内でDOMをどう扱うか
- 1行のscriptタグまたはnpmでの導入手順
- Playwrightやbrowser-useとの使い分け
- 本番運用で押さえるべきセキュリティ上の限界
ブラウザの外から操作する方式の限界
Selenium、Playwright、Puppeteerは、ブラウザの外からWebDriverやChrome DevTools Protocol（CDP）でページを動かします。外部プロセスが画面を読み取り、クリック座標を送る構成です。E2Eテストには向きますが、ログイン済みのSaaS画面にコパイロットを載せるには、認証情報の受け渡しやセッション管理の追加実装が欠かせません。
browser-useのようなPython製エージェントも、基本は外部からブラウザを起動して操作します。スクリーンショットとマルチモーダルLLMを組み合わせる方式は精度は出ますが、推論コストが高くなりがちです。
PageAgentはページ内でDOMをテキスト化して動く
https://github.com/alibaba/page-agent
PageAgentは、Webページの中で動くJavaScriptライブラリです。公式READMEでは「The GUI Agent Living in Your Webpage（Webページ内に住むGUIエージェント）」と説明されています。ブラウザ拡張、Python、ヘッドレスブラウザは不要で、ページ内のJavaScriptだけで動作します。
中核はDOM脱水（DOM Dehydration）と呼ばれる処理です。ページ上のボタン、リンク、入力欄など操作可能な要素を走査し、番号・役割・ラベルを付けてFlatDomTreeというテキスト形式に圧縮します。LLMにはピクセルではなく、この軽量な構造テキストだけを渡します。スクリーンショットもマルチモーダルLLMも不要です（参考）。
動作は観察・思考・実行のループです。PageControllerがDOMを更新し、LLMの指示に従ってクリックや入力、スクロールをブラウザの標準イベントとして発火します。DOM処理のコンポーネントとプロンプトは、MITライセンスのbrowser-useプロジェクトをベースにしています（公式README）。
ページ内で動くため、ユーザーのCookieやセッションをそのまま引き継げます。既存UIのバリデーションもそのまま効きます。バックエンドの書き換えなしにコパイロットを足せる点が、SaaS開発者にとっての実用価値です。
主な機能と想定ユースケース
公式READMEが挙げる用途は次のとおりです。
- SaaS AI Copilot — 数行のコードで製品内にAIアシスタントを載せる
- Smart Form Filling — ERPやCRMの多段フォームを一文の指示にまとめる
- Accessibility — 自然言語や音声でWebアプリを操作しやすくする
- Multi-page Agent — 任意のChrome拡張でタブをまたぐ操作を拡張
- MCP — ベータ版MCPサーバー経由で外部エージェントからブラウザを制御
LLMはOpenAI互換APIなら任意のモデルを指定できます。READMEの例ではQwen 3.5 PlusとAlibaba CloudのDashScopeエンドポイントが示されていますが、GPTやClaudeなど他社モデルもbaseURLとapiKeyの差し替えで接続できます。
GitHubリポジトリはMITライセンスで公開され、2026年7月3日時点でスター数は約2.2万、最新リリースはv1.10.0（2026年6月15日公開）です。TypeScript製のモノレポで、page-agent（UI付きエントリ）、@page-agent/core（ヘッドレス制御）、@page-agent/page-controller（DOM操作）などに分割されています。
導入手順
1行のscriptタグ（評価用）
最速の試用はCDNからの読み込みです。
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js" crossorigin="true"></script>
このデモCDNは無料のテスト用LLM APIを使います。公式は「技術評価のみ」と明記しており、本番利用には向きません。?autoInit=falseを付けると自動初期化を止め、new window.PageAgent(...)で手動設定できます。
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: 'ja-JP',
})
await agent.execute('ログインボタンをクリックして')
apiKeyをフロントエンドに直書きするとクライアントバンドルに含まれます。本番では自前バックエンドでLLM APIをプロキシし、キーをサーバー側に置く構成が安全です。重要な操作の前にユーザー承認を挟む設定も用意されています（参考）。
Playwrightやbrowser-useとの使い分け
| 方式 | 動作場所 | ページの読み取り | 向く用途 |
|---|---|---|---|
| PageAgent | ページ内（クライアントJS） | 脱水済みテキストDOM | 自社SaaSへのコパイロット追加 |
| Playwright / Puppeteer | 外部プロセス | WebDriver / CDP | スクリプト化されたE2Eテスト |
| browser-use | 外部プロセス | DOM＋任意でビジョン | 自律的なマルチサイト探索 |
PageAgentは「自分がコードを載せられるWebアプリ」向けです。権限のない外部サイトを横断してスクレイピングする用途には向きません。コアライブラリは単一ページ内の操作が主眼で、タブをまたぐ処理にはChrome拡張の別途インストールが必要です。
導入前に知っておく制約
便利さの裏に、技術的な境界もあります。
プロンプトベースの安全制御は「支払いフォームを自動送信しない」といった指示をLLMに与える方式です。これは説得のガイドであり、ハードな論理分離ではありません。送金やデータ削除など高リスク操作は、サーバー側の検証を必ず残してください（参考）。
公式READMEでも、PageAgentは「クライアント側のWeb強化」向けであり、サーバー側の自動化ツールではないと位置づけています。評価用デモCDNの利用規約にも同意が必要です。
話題になっている背景
X上では、Kanika氏の投稿が「ブラウザ拡張なしで自然言語からUI操作」「1行のコードで導入」といった点を強調し、SaaS開発者の関心を集めています（参考）。デモ動画では「ログインをクリック、認証情報を入力、フォームを送信」のような複合指示を一文で処理する様子が示されています。
GitHubスターが短期間で2万を超えた背景には、AI機能を自社プロダクトに載せたいがバックエンド改修の工数が足りない、という開発現場のニーズが重なっていると読めます。マルチモーダルLLMに頼らずテキストDOMだけで動く設計は、運用コストの面でも現実的です。
PageAgentは小さなライブラリに見えますが、「AIはブラウザの外から操作する」という常識を、「アプリの中に住まわせる」方向へ転換する試みです。自社Webアプリに自然言語操作を足したい開発者は、まずデモCDNで挙動を確認し、本番ではプロキシとサーバー側検証を組み合わせて導入するのが現実的な第一歩になります。