--- title: PageAgent 調査レポート tool_name: PageAgent tool_reading: ページエージェント category: ブラウザ操作エージェント developer: Alibaba official_site: https://alibaba.github.io/page-agent/ date: '2026-07-02' last_updated: '2026-07-02' tags: - AI - エージェント - オープンソース - ブラウザ自動化 - 開発者ツール description: Webページ内に組み込み、自然言語で操作を可能にするJavaScript製GUIエージェント。 quick_summary: has_free_plan: true is_oss: true starting_price: 無料 target_users: - Web開発者 - SaaS開発者 latest_highlight: v1.10.0リリース（ライフサイクルの刷新やMCPサポート等） update_frequency: 高 evaluation: score: 83 base_score: 70 plus_points: - point: 5 reason: フロントエンドのみで完結しバックエンドや拡張機能が不要 - point: 5 reason: 視覚認識不要のDOMベース解析による高速かつ正確な操作 - point: 3 reason: オープンソースであり無料で利用可能 minus_points: - point: 0 reason: '' summary: 既存のWebアプリケーションに容易にAIコパイロットを組み込める画期的なオープンソースツール links: github: https://github.com/alibaba/page-agent codewiki: https://codewiki.google/github.com/alibaba/page-agent deepwiki: https://deepwiki.com/alibaba/page-agent documentation: https://alibaba.github.io/page-agent/docs/introduction/overview relationships: related_tools: - Ferret-UI - Playwright - Selenium - Autify - MagicPod - Browser Harness --- # **PageAgent 調査レポート** ## **1. 基本情報** * **ツール名**: PageAgent * **ツールの読み方**: ページエージェント * **開発元**: Alibaba * **公式サイト**: [https://alibaba.github.io/page-agent/](https://alibaba.github.io/page-agent/) * **関連リンク**: * GitHub: [https://github.com/alibaba/page-agent](https://github.com/alibaba/page-agent) * ドキュメント: [https://alibaba.github.io/page-agent/docs/introduction/overview](https://alibaba.github.io/page-agent/docs/introduction/overview) * **カテゴリ**: 自律型AIエージェント / 自動化ツール * **概要**: PageAgentは、Webページ内に直接組み込むことができるGUIエージェントライブラリです。ブラウザ拡張機能やPython、バックエンドを必要とせず、クライアントサイドのJavaScriptのみで自然言語によるWebページのDOM操作を実現します。 ## **2. 目的と主な利用シーン** * **解決する課題**: 既存のB2BソフトウェアやSaaS製品において、ユーザーが複雑な操作を自然言語で実行できるようにするためのAIコパイロット機能の追加を、バックエンドの大規模改修なしに実現します。 * **想定利用者**: Web開発者、SaaS開発者 * **利用シーン**: * **SaaS AI Copilot**: 既存のWeb製品に数行のコードでAIコパイロット機能を追加。 * **Smart Form Filling**: 複雑な入力フォーム（ERP、CRM、管理システム等）での20クリック以上の操作を1文で実行。 * **Accessibility**: 視覚障害者や高齢者向けに、音声やスクリーンリーダーと連携した自然言語インターフェースの提供。 ## **3. 主要機能** * **簡単な統合 (Easy Integration)**: ブラウザ拡張機能、Python、ヘッドレスブラウザを一切使用せず、ページ内のJavaScriptとして動作します。 * **テキストベースのDOM操作 (Text-based DOM manipulation)**: スクリーンショットや視覚的認識（OCR）、マルチモーダルLLMを必要とせず、純粋なテキスト情報としてDOMを解析し高速かつ正確に操作します。 * **任意のLLM連携 (Bring your own LLMs)**: カスタムのエンドポイントを使用して、好みのLLMを統合できます。 * **セキュア＆コントロール可能 (Secure & Controllable)**: 操作許可リスト（Allowlist）やデータマスキング保護をサポートし、独自ルールのナレッジを注入できます。 * **MCP対応 (Model Context Protocol)**: Claude DesktopやCopilotなどのMCPクライアントから、拡張機能を通じてブラウザ操作を直接制御可能です。 * **中断可能なJavaScript実行**: `AbortSignal`に対応し、JavaScriptの実行を安全に中断・制御できます。 ## **4. 開始手順・セットアップ** * **前提条件**: * Node.js環境（NPMを使用する場合）、またはCDN経由での読み込み。 * 使用するLLMのAPIキー（例：DashScopeのAPIキー等）。 * **インストール/導入**: ```bash # NPMによるインストール npm install page-agent ``` ```html ``` * **初期設定・クイックスタート**: ```javascript 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') ``` ## **5. 特徴・強み (Pros)** * **完全なクライアントサイド動作**: バックエンドサーバーを持たず、ゼロバックエンドでブラウザ内で完結します。 * **視覚処理が不要**: スクリーンショットやマルチモーダルLLMを使わずにDOMベースで操作するため、高速かつ軽量です。 * **アクセシビリティの向上**: 一行のコードで既存システムをAI対応にし、ソフトウェアを誰にとっても使いやすいものに変えられます。 ## **6. 弱み・注意点 (Cons)** * **スコープの制限**: 基本的に「現在のページ」に対する操作に特化しているため、ブラウザ全体やOSレベルの自動化には向いていません（ただしマルチページ操作用の拡張機能のオプションはあります）。 * **LLMへの依存**: 利用者が自身でLLM APIキーを用意するか、開発者がセキュアなプロキシAPIを構築する必要があります。 * **DOM構造への依存**: 視覚認識を使わないため、DOMツリーが特殊なサイト（例: Canvasベースのレンダリング）では動作が制限される可能性があります。 ## **7. 料金プラン** | プラン名 | 料金 | 主な特徴 | |---------|------|---------| | **オープンソース (MIT)** | 無料 | すべての機能を無料で利用可能。ただし利用するLLMのAPI利用料は自己負担となります。 | * **課金体系**: 完全無料（MITライセンス） * **無料トライアル**: なし（デモ用として無料のテストLLM APIが提供されています） ## **8. 導入実績・事例** * **導入企業**: Web開発者やSaaS企業向けに提供されたツールであり、具体的な導入企業名は公式サイトで公表されていません。 * **対象業界**: 複雑な管理画面や業務システムを提供するB2B SaaSプロバイダー、およびアクセシビリティ向上を目指すサービス事業者。 ## **9. サポート体制** * **ドキュメント**: 公式ドキュメントサイト（GitHub Pages）が提供されています。 * **コミュニティ**: GitHubのリポジトリでIssueやDiscussionを通じて活発にサポートと開発が行われています。 * **公式サポート**: オープンソースプロジェクトのため、企業向けの専用SLAサポートは提供されていません。 ## **10. エコシステムと連携** ### **10.1 API・外部サービス連携** * **API**: 開発者向けのJavaScript API（`PageAgent` クラス）が提供され、LLMのモデル指定やベースURL、APIキーの設定が可能です。 * **外部サービス連携**: OpenAI互換のAPIエンドポイントを持つ任意のLLM（DashScopeなど）と連携可能です。 ### **10.2 技術スタックとの相性** | 技術スタック | 相性 | メリット・推奨理由 | 懸念点・注意点 | |:---|:---:|:---|:---| | **Vanilla JavaScript** | ◎ | CDN経由で一行で導入可能 | 特になし | | **React / Vue / モダンJS** | ◎ | NPMパッケージとして直接インポート可能 | 仮想DOMとの同期タイミングに注意が必要な場合がある | ## **11. セキュリティとコンプライアンス** * **認証**: LLM APIとの通信にAPIキーを使用します。クライアントサイドで直接APIキーを扱うのはセキュリティリスクがあるため、本番環境ではサーバーサイドでAPIリクエストをプロキシすることが推奨されます。 * **データ管理**: 操作対象のページ情報はLLMに送信されますが、データマスキング保護（Data masking protection）の機能が提供されており、機密情報を保護できます。 * **操作制限**: アクションの許可リスト（Allowlist）をサポートしており、エージェントが実行できる操作を開発者が制限できます。 ## **12. 操作性 (UI/UX) と学習コスト** * **UI/UX**: ユーザーには自然言語によるチャット形式のインターフェースが提供され、Human-in-the-loop（人間の介入）を伴う美しいUIを構築できます。 * **学習コスト**: Web開発者にとってはNPMやCDNでライブラリを読み込み、初期化するだけなので導入は非常に容易です。 ## **13. ベストプラクティス** * **効果的な活用法 (Modern Practices)**: * **サポートボットとの接続**: 単に「設定ボタンをクリックして…」と文字で案内するだけでなく、エージェントがユーザーに代わって直接操作を実行する。 * **インタラクティブなトレーニング**: 「経費精算の提出方法」など、複雑なプロセスの全体をAIにリアルタイムで実演させる。 * **陥りやすい罠 (Antipatterns)**: * ユーザーのブラウザ上で生のLLM APIキーを直接ハードコードして公開してしまうこと。 ## **14. ユーザーの声（レビュー分析）** * **調査対象**: Google検索で確認されたサードパーティ記事（Emeliaブログなど）やGitHub。 * **ポジティブな評価**: * 「ブラウザ拡張機能やPythonサーバーを介さずに、JavaScriptライブラリだけで完結する点が素晴らしい」という開発者からの評価。 * GitHubで急速にスターを集め、Hacker Newsなどの開発者コミュニティで注目を集めています。 ## **15. 直近半年のアップデート情報** * **2026-06-15**: `v1.10.0` をリリース（エージェント実行ライフサイクルの刷新、JavaScript実行の中断サポート、ダークモード検出の改善等）。 * **2026-06-08**: `v1.9.0` をリリース（エラーハンドリングと中断処理の強化、Claude Opus 4.8サポート等）。 * **2026-04-14**: `v1.8.0` をリリース（TypeScript 6へのアップグレード等）。 * **2026-03-20**: `v1.6.0` をリリース（MCPのベータサポート追加、履歴ワークフローの導入等）。 * **2026-03-10**: `v1.5.5` をリリース（パッケージの最新バージョンとして確認）。 * **2026-03-09**: `v1.5.4` をリリース。 (出典: [GitHub Releases](https://github.com/alibaba/page-agent/releases) 等) ## **16. 類似ツールとの比較** ### **16.1 機能比較表 (星取表)** | 機能カテゴリ | 機能項目 | PageAgent | Browser Harness | Playwright / Selenium | |:---:|:---|:---:|:---:|:---:| | **基本機能** | デプロイ形態 | ◎
埋め込みコンポーネント | ◯
外部ツール | ◯
外部ツール | | **スコープ** | 動作範囲 | ◯
現在のページ | ◎
ブラウザ全体 | ◎
ブラウザ全体 | | **対象ユーザー** | ターゲット | ◎
Web開発者 | ◯
AIエージェント開発者等 | ◯
QAエンジニア等 | | **非機能要件** | AIコパイロット/エージェント対応 | ◎
自然言語での組み込みGUI操作 | ◎
外部からの自己修復型自動化 | ◯
Test Agentsによる生成・修復 (Playwright) | | **非機能要件** | 視覚認識の要否 | ◎
不要（DOM解析のみ） | △
要（マルチモーダルLLM） | -
該当なし | ### **16.2 詳細比較** | ツール名 | 特徴 | 強み | 弱み | 選択肢となるケース | |---------|------|------|------|------------------| | **PageAgent** | Webページ内に組み込むGUIエージェント | 導入が容易。バックエンド不要。テキストベースで高速。 | OSレベルやブラウザ全体の自動化には不向き。 | 自社のSaaS製品にAIコパイロットや自動入力機能を追加したい場合。 | | **Browser Harness** | 外部からブラウザを制御する自動化ライブラリ (browser-use派生) | ブラウザ全体を操作可能。マルチモーダルLLMに対応。 | サーバーサイド（Python等）の実行環境が必要。 | 任意のWebサイトのスクレイピングや、ブラウザを横断した作業の自動化。 | ※PageAgentは `browser-use` (Browser Harnessの関連技術) の優れたDOM処理コンポーネントを派生元として利用していますが、ユースケース（Webサイト側への組み込み vs 外部からの自動化）が明確に異なります。 ## **17. 総評** * **総合的な評価**: PageAgentは、従来のブラウザ自動化ツールとは一線を画し、Web開発者が自身のWebアプリケーションにAIアシスタントを直接組み込むために設計された革新的なライブラリです。視覚認識に依存しないDOMベースの解析により、高速かつ正確な操作を実現しています。 * **推奨されるチームやプロジェクト**: 既存のB2B SaaS製品、複雑な管理画面を持つシステム、またはアクセシビリティの向上を目指すフロントエンド開発チーム。 * **選択時のポイント**: バックエンドの改修を行わずに、フロントエンドの数行のコード追加だけで、ユーザーが自然言語でシステムを操作できるAIコパイロット機能を提供したい場合に最適な選択肢となります。