Page-Agent 検証：アリババのオープンソース純フロントエンドGUI Agent、1行のコードでウェブサイトをAIネイティブアプリに変身
SaaS製品に「AIコパイロット」を追加するのはどれほど大変ですか？従来のアプローチは基本的に2つのパスを提供します：バックエンドを書き直してエージェントオーケストレーションシステムを構築するか、ブラウザ拡張機能やヘッドレスブラウザをインストールしてページを外部から制御するか。どちらのパスも軽量ではありません。
アリババのオープンソースPage-Agent（GitHub 18.7K Star、MITライセンス）は第3のパスを提供します：ウェブページ内に住み、自然言語でインターフェースを操作する純ページ内JavaScript GUI Agentです。
ブラウザ拡張も、Pythonも、ヘッドレスブラウザも不要——<script>タグ1つだけで、ページが自然言語コマンドを理解できるようになります。
Page-Agentとは
Page-Agentはアリババの純フロントエンドGUI Agentで、TypeScriptで書かれ、ブラウザのJavaScriptランタイム内で実行されます。ページのDOMをテキストとして読み取ってインターフェース構造を理解し、LLMを使用して実行するアクション（クリック、入力、スクロールなど）を決定し、最終的に実際のDOM操作に変換します。
核心的なポジショニングは明確です：クライアントサイドWeb拡張であり、サーバーサイド自動化ツールではありません。ターゲットユーザーは製品開発者——SaaS製品、ERP/CRMシステム、管理ダッシュボードに数行のコードでAI操作機能を追加できるようにします。
従来のブラウザ自動化との本質的な違い
市場のほとんどのウェブ自動化ソリューションは「外部制御」ルートに従います——ブラウザプロセスを起動し、CDPプロトコルを通じてページを操作します。Page-Agentは完全に逆の方向に進みます：ページ自身のJSランタイム内で、ビジネスコードと同じプロセスで実行されます。
| 次元 | Page-Agent | Playwright / Browser Use | Selenium |
|---|---|---|---|
| 実行位置 | ページ内JS、同じプロセス | ブラウザを制御する外部プロセス | 外部プロセス + WebDriver |
| 依存関係 | <script>タグ1つ | Python + ブラウザバイナリ | Java/Python + ドライバー |
| ユーザーインストール | インストールゼロ、ウェブページに組み込み | 拡張機能またはAgentクライアントが必要 | ドライバー設定が必要 |
| 認識方法 | テキストDOM（スクリーンショットなし） | スクリーンショット + マルチモーダルLLM / DOM | WebDriver経由のDOM |
| モデル要件 | テキストモデルのみ | マルチモーダルまたはテキスト | LLM不要 |
| 最適な用途 | 製品内AIコパイロット | クロスサイト自動化 / RPA | E2Eテスト |
| ポジショニング | クライアントサイドWeb拡張 | サーバーサイド自動化 | テストフレームワーク |
コア技術アーキテクチャ：DOM脱水（DOM Dehydration）
Page-Agentの最も賢い設計判断はスクリーンショットを撮らないことです。ほとんどのGUI Agentは「スクリーンショット + マルチモーダルLLMが画像を見て操作」に依存していますが、このアプローチは純ページ内JS環境では機能しません。
Page-Agentは**DOM脱水（DOM Dehydration）**と呼ばれる技術を使用します：
- DOMをスキャン：ページのDocument Object Modelを走査し、すべてのインタラクティブ要素を識別
- 要素のインデックス付け：各インタラクティブ要素にインデックス番号を割り当て、役割とラベルを付与
- FlatDomTreeを生成：ライブDOMをコンパクトなテキストツリー構造に変換
- LLM意思決定：テキストLLMがこのコンパクトな表現を読み取り、アクション指示を出力
- 操作を実行：Agentが指示を実際のDOM操作に変換
1行コード統合
最速体験（無料テストLLM）
<script
src="https://cdn.jsdelivr.net/npm/page-agent@1.12.2/dist/iife/page-agent.demo.js"
crossorigin="anonymous"
></script>NPMインストール（本番推奨）
npm install page-agentimport { 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('ログインボタンをクリック')主要GUI Agentソリューションとの包括的な比較
| 次元 | Page-Agent | Browser Use | UI-TARS | Playwright MCP |
|---|---|---|---|---|
| 開発者 | アリババ | コミュニティOSS | ByteDance | Microsoft |
| 実行位置 | ページ内JS | 外部Pythonプロセス | 外部プロセス | 外部Nodeプロセス |
| 認識方法 | テキストDOM | DOM + オプションスクリーンショット | スクリーンショット + マルチモーダル | CDP経由のDOM |
| モデル要件 | テキストモデル | テキストまたはマルチモーダル | 特殊化ビジョンモデル | テキストモデル |
| クロスページ | Chrome拡張必要 | ネイティブサポート | ネイティブサポート | ネイティブサポート |
| 統合難易度 | ⭐ 非常に低い | ⭐⭐⭐ 中程度 | ⭐⭐⭐⭐ 高い | ⭐⭐⭐ 中程度 |
| コアシナリオ | 製品内コパイロット | 一般自動化 | 視覚的に複雑なタスク | Agentブラウザ制御 |
結論
長所
✅ インストールゼロ統合：<script>タグ1つ、ユーザーは気づかない
✅ 軽量で効率的：純テキストDOM、マルチモーダルモデル不要、コスト削減
✅ モデル非依存：OpenAI互換APIならどれでもサポート、ローカルモデルも
✅ セキュリティ制御：操作許可リスト、データマスキング、知識注入
✅ オープンソースで無料：MITライセンス、商用利用可能
短所
❌ 単一ページ制限：クロスページにはChrome拡張が必要 ❌ 視覚情報の損失：Canvas/WebGLなどの視覚集約型ページには不向き ❌ LLM依存：各操作にネットワーク遅延とAPIコストが発生 ❌ APIキーのセキュリティ：フロントエンド露出リスク、バックエンドプロキシが必要
誰が使うべきか、誰が使うべきでないか
使うべき：
- SaaS開発者：製品にAIコパイロットを追加
- 企業IT：内部システム（ERP/CRM/OA）を最適化
- アクセシビリティ開発者：障害を持つユーザーにウェブページをよりフレンドリーに
使うべきでない：
- テストエンジニア：Playwrightの方が適切
- クローラー開発者：Puppeteer/Cheerioの方が適切
- クロスサイト自動化：Browser Useの方が適切
この記事があなたのお役に立てれば幸いです！
