Alibabaが公開したPage Agentが話題だ。GitHubで22.7kスターを獲得し、世界で最も注目を集めているGUIエージェントフレームワークの1つになっている。

Page Agentはシンプルな発想を持つ。従来のブラウザ自動化ツール（browser-use / Playwright / Puppeteer）は「外部ツール」としてブラウザを操作する。サーバーを立て、Pythonスクリプトを書き、ヘッドレスブラウザを起動する必要があった。

Page Agentは違う。JavaScriptの1行をページに追加するだけで、AIがそのページを操作できるようになる。

この記事ではPage Agentが何なのか、何ができるのか、具体的にどう使うのかを、初心者にもわかりやすく解説する。

Page Agentとは何か？

Page AgentはAlibabaがMITライセンスで公開した、純粋なWebベースのGUIエージェントだ。

最大の特徴は「ページの中に住むAI」という発想。通常のブラウザ自動化ツールが外部からページを操作するのに対し、Page Agentはページ内部にJavaScriptとして埋め込まれ、DOMを直接読み取って操作する。

この「内部から操作する」アプローチにより、以下のメリットが生まれる：

• インフラ不要：サーバーもPythonもヘッドレスブラウザも不要
• セットアップ高速：1行のスクリプトタグで即座に動く
• スクリーンショット不要：DOMをテキストとして読むので、マルチモーダルLLMが不要
• 軽量：バンドルサイズは最小限

Page Agentの4つの核となる特徴

1. スマートDOM解析

Page Agentはスクリーンショットを取らない。代わりにページのDOMを直接読み取り、テキストとして解析する。

「高強度脱水（high-intensity dehydration）」 と呼ばれる独自の技術で、DOMツリーをAIに渡す前に最適化する。不要なノードを削除し、操作に必要な情報だけを抽出。これにより、マルチモーダル（画像認識）LLMを使わずとも、テキストベースのLLMで正確な操作が可能になる。

この方式の利点は：

• 処理が速い（画像アップロード不要）
• コストが安い（画像トークンよりテキストトークンの方が圧倒的に安い）
• 精度が高い（OCRの誤認識がない）

2. ゼロバックエンド

CDN経由のスクリプトタグ1行で導入できる。もちろんnpmパッケージとしてのインストールも可能だ。

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.11.0/dist/iife/page-agent.demo.js" crossorigin="true"></script>

これだけで、ページ上にAIアシスタントが出現する。

本番環境では自分のLLM APIキーを設定する：

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',
})

3. セキュア＆コントローラブル

AIに自由にページを操作させるのは怖い。Page Agentはこの問題を真摯に設計している：

• 操作許可リスト（Allowlist）：AIが操作して良い要素を制限できる
• データマスキング：個人情報や機密データをAIに見せない設定が可能
• カスタム知識注入：AIに特定のルールや業務知識を事前に教え込める

これにより、重要な業務システムでも安心して導入できる。

4. BYOLLM（自分のLLMを持ち込む）

Page Agentは特定のLLMに依存しない。Qwenはもちろん、Claude / GPT / Gemini / DeepSeekなど、OpenAI互換のAPIエンドポイントなら何でも使える。

Page Agentでできる7つの具体的なこと

ここが本題だ。Page Agentを導入すると、具体的にどんなことができるのか、実際のユースケースを紹介する。

1. SaaS AI Copilot

最も基本的な使い方。自社のSaaS製品に「自然言語で操作できるAIアシスタント」を埋め込める。

具体例：

• カスタマーサポートAIが「設定ボタンをクリックしてください」と指示する代わりに、実際に操作を代行する
• 「先週の売上レポートをCSVでエクスポートして」の一言で、複数画面をまたいだ操作を完了
• 新機能の使い方をAIが実演しながらガイド

従来のチャットボットは「話すだけ」だった。Page AgentのCopilotは「操作もする」。サポートコストの削減と顧客満足度の向上に直結する。

2. スマートフォーム入力

ERP / CRM / 管理画面など、20クリックかかる入力業務が1つの指示で完了する。

具体例：

• 「新入社員の山田太郎を営業部に登録して。メールはyamada@example.com」
• 「請求書No. INV-2026-0456のステータスを『支払済み』に更新して」
• 「先月の経費データをテンプレートBで月次レポートにまとめて」

複数画面を遷移し、フォームに値を入力し、ボタンを押すところまでAIがすべて実行する。

3. レガシーシステムの近代化

古い管理画面やB2BシステムはUIが複雑で、新入社員のトレーニングに時間がかかる。Page Agentは、その上にAIレイヤーを1行追加するだけで、レガシーシステムを「AI-nativie」に変える。

具体例：

• 20年前に作られた在庫管理システムに「今月の出荷予定一覧を出して」と話しかけるだけで操作
• 複数のシステムを横断する承認フローをAIが自動実行
• 業務知識を持ったAIが、ベテラン社員の代わりに複雑な操作を代行

4. インタラクティブトレーニング

新しいシステムの使い方を新しいメンバーに教えるとき、Page Agentはリアルタイムで操作をお手本として見せられる。

具体例：

• 「経費精算の申請方法を実演して」と言うと、実際に画面を操作しながら手順を表示
• AIが操作している様子を見ながら、新メンバーは「次は何が起きるか」を学習
• トレーニング資料を作る必要がなくなる

5. アクセシビリティ（Webアクセシビリティ向上）

視覚障碍者や高齢者にとって、複雑なWeb操作は大きな障壁だ。Page Agentはこれらのユーザーに自然言語インターフェースを提供する。

具体例：

• スクリーンリーダーと連携し、「予約ページを開いて、来週の火曜日の15時で予約して」で操作完了
• 音声アシスタント（AlexaやGoogle Home）と組み合わせて、音声だけでWeb操作
• 複雑な管理画面を「簡単モード」としてAI経由で使えるように

6. マルチページAgent（Chrome拡張機能）

標準のPage Agentは1ページ内の操作に特化しているが、Chrome拡張機能を使うとブラウザのタブをまたいだ操作も可能になる。

具体例：

• 「A社の見積書をメールからダウンロードして、クラウド請求書システムにインポートして」
• 複数のSaaS間でのデータ移行を自動化
• 一つの指示で、情報収集から帳票作成までを完結

7. MCPサーバー連携（ベータ）

Page AgentはMCP（Model Context Protocol）サーバーとしても機能する。つまり、Claude CodeやCursorなどのAIエージェントから、ブラウザ操作を依頼できる。

具体例：

• Claude Codeが「このデータを管理画面に入力して」とPage Agentに依頼
• Hermes AgentがPage Agentを使ってWeb操作を実行
• AIエージェントが「見て確認できない」という壁を、Page Agentが突破する

Chrome拡張機能とMCPの使い分け

Page Agentには2つの「ページの外」との連携方法がある。違いを理解しておこう。

導入方法（3ステップ）

ステップ1: スクリプトを追加する

試すだけならCDNのデモ用スクリプトを1行追加する：

<script 
  src="https://cdn.jsdelivr.net/npm/page-agent@1.11.0/dist/iife/page-agent.demo.js" 
  crossorigin="true">
</script>

?autoInit=false をURLに付けると、自動初期化を止めて自分でインスタンス化できる。

ステップ2: 自分のLLMを設定する（本番環境）

npm install page-agent

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
  model: 'gpt-4.1',
  baseURL: 'https://api.openai.com/v1',
  apiKey: process.env.OPENAI_API_KEY,
  language: 'ja-JP',
  debug: false,
})

ステップ3: 操作を実行する

// 1つの指示でページを操作
await agent.execute('ログインボタンをクリックして')

// 複雑な操作も自然言語1文で
await agent.execute('
  先月の売上データをCSVでエクスポートして、
  メールでmanager@company.comに送信
')

制限事項と注意点

Page Agentは画期的だが、いくつかの制限を理解した上で使う必要がある。

現在の制限

• シングルページが基本：複数タブの操作にはChrome拡張機能が必要
• DOMベース：CanvasやSVGで描画されたコンテンツは読み取れない（ただし SVG要素自体は操作可能）
• LLMの品質に依存：AIの精度は裏側のLLMに大きく依存する
• 動的コンテンツ：WebSocketで頻繁に更新されるページは、適切なリフレッシュ設定が必要
• MCPサーバーはベータ：まだ実験的な機能で、安定性はこれから

セキュリティ上の注意

• 操作許可リストを設定する：AIにすべての操作を許可するのは危険。必要な操作だけに制限する
• データマスキングを活用する：個人情報や機密データがLLMに送信されるのを防ぐ
• 本番環境ではデモ用LLMを使わない：デモCDNのLLMはテスト用。必ず自分のAPIキーを使う

まとめ

Page Agentは「ブラウザ自動化」の新しいパラダイムだ。従来の外部ツール型とは異なり、ページの中に住むAIという発想で、これまでより圧倒的にシンプルにWeb操作の自動化を実現する。

こんな人におすすめ：

• SaaS製品にAI Copilotを追加したいプロダクトマネージャー
• 社内のレガシーシステムを刷新したい開発者
• フォーム入力の自動化で業務効率化を目指す企業
• アクセシビリティ向上に取り組むWeb開発者
• AIエージェント（Claude Code / Cursor / Hermes Agent）にWeb操作をさせたい人

Alibabaのオープンソースへの本気度は過去のプロジェクト（Apache Dubbo、Apache RocketMQなど）が証明している。Page Agentもv1.11.0、1,085コミット、22.7kスターと、すでに成熟したプロジェクトだ。

まずはデモCDNの1行を自分の開発環境に追加して、どんな操作ができるか試してみてほしい。

---

合わせて読みたい

• 【2026年】Hermes Agentメモリ完全比較！組み込み vs Honcho vs Mem0 vs Hindsight vs ByteRover【全9種】
• 【2026年】Loop Library（ループライブラリ）完全ガイド！コピペで使える70のAIエージェントループ集
• 【2026年】scroll-world完全ガイド！Claude Code/Codexで「スクロールする3D世界」を自動生成する革命的エージェントスキル
• 【2026年】Blender MCPをHermes Agentで使う完全ガイド！AIに3Dモデリングを指示する初心者向け設定手順
• 【2026年】AIエージェントの作り方「ループ」と「グラフ」徹底解説！loop engineer は終わり？初心者が知るべき設計のトレンド