PageAgent：9640⭐のアリババ製Web GUI Agent
アリババが最近オープンソース化した興味深いプロジェクト：PageAgent。これは純粋なフロントエンドで動作するWeb GUI Agentで、自然言語でWebページを制御できます。従来の自動化ツールとは異なり、ブラウザ拡張機能やPythonスクリプト、バックエンドサービスを必要とせず、ページ内で直接実行され、数行のコードで統合できます。
プロジェクト概要
| 属性 | 内容 |
|---|---|
| GitHub | alibaba/page-agent |
| Stars | 9,640 |
| 言語 | TypeScript |
| 特徴 | 純粋フロントエンド、自然言語制御、BYO-LLM |
| 最終更新 | 今日 |
解決する問題
従来のWeb自動化には主に以下のようなアプローチがありました：
- Selenium/Playwright：バックエンドサービスが必要で、ヘッドレスブラウザに依存し、デプロイコストが高い
- ブラウザ拡張機能：ユーザーにインストールが必要で、クロスオリジン制限が多い
- MCP Browser：サーバーサイドのサポートが必要で、設定が複雑
PageAgentは異なるアプローチを取っています：ページ内にJavaScriptを直接注入し、LLMを利用してDOM構造を理解し操作を実行します。これにより：
- サーバー不要、完全クライアントサイド実行
- ブラウザ拡張機能不要（クロスページタスク用のオプション拡張は提供）
- 既存製品にAI Copilotとして埋め込み可能
主な機能
1. テキストベースのDOM操作
PageAgentはスクリーンショットやマルチモーダルモデルを使用せず、テキスト方式でDOMを処理します。ページ要素にラベルを付け、LLMがこれらのラベルに基づいてどの要素をクリックし、何を入力するか決定します。
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('ログインボタンをクリックし、ユーザー名adminとパスワード123456を入力')2. 美しいUI同梱
低レベルAPIに加えて、PageAgentはすぐに使えるチャットインターフェースを提供し、人間とAIの協働をサポートします。ユーザーはAIの実行ステップを確認し、いつでも介入や修正ができます。
3. マルチページタスク対応（オプション）
コアはシングルページですが、付属のChrome拡張機能を使うことで、PageAgentはクロスページのワークフローを処理できます。例えば、商品検索→詳細を開く→カートに追加→決済といった流れです。
4. 交換可能なLLM
PageAgent自体は特定のモデルに依存しておらず、OpenAI、Anthropic、通義千問、ローカルモデルなどが使用可能です。OpenAI互換のAPI形式をサポートしていれば問題ありません。
クイックスタート
最も簡単な方法はCDN経由で導入することです（注意：これは技術評価のみを目的としており、アリババが提供するテスト用LLMを使用します）：
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.8/dist/iife/page-agent.demo.js" crossorigin="true"></script>本番環境ではnpm経由でのインストールを推奨します：
npm install page-agent類似ツールとの比較
| ツール | Stars | アーキテクチャ | 特徴 |
|---|---|---|---|
| browser-use | 51k | Python + ヘッドレスブラウザ | 強力だがバックエンドが必要 |
| Playwright MCP | 8k | Node.js + ブラウザ | Microsoft公式、高い安定性 |
| PageAgent | 9.6k | 純粋フロントエンドJS | バックエンド不要、統合が容易 |
軽量で製品に組み込みやすいWeb自動化ソリューションが必要な場合、PageAgentは検討に値する選択肢です。特にSaaS製品にAI Copilot機能を素早く追加したい場合、数行のコードで実現できます。
適用シナリオ
- SaaS AI Copilot：バックエンドの再構築なしに既存製品にAIアシスタントを素早く追加
- スマートフォーム入力：複雑な20ステップの操作を1文に簡略化、ERP、CRM、管理システムに最適
- アクセシビリティ：自然言語でWebアプリを制御、音声コマンドやスクリーンリーダーをサポート
- 自動化テスト：LLMの理解能力を組み合わせて、メンテナンスしやすいUIテストを作成
注意事項
- CSP（Content Security Policy）が厳格なサイト（GitHubなど）は、ブラウザ拡張機能版が必要になる場合があります
- 現在、Shadow DOM内の要素との相互作用はサポートされていません
- LLM API Keyは自分で準備する必要があり、無料デモ版は評価用のみです
プロジェクト情報
| 属性 | 内容 |
|---|---|
| リポジトリ | https://github.com/alibaba/page-agent |
| ライセンス | MIT |
| 言語 | TypeScript |
| 開発者 | @alibaba |
プロジェクトは急速に開発が進んでおり、今日もコミットされています。この分野に興味がある方は、GitHubでStarを付けて今後の動向をフォローしてください。