こんな経験はありませんか。古びた社内管理画面、行政の手続きサイト、取引先の発注システム。UI が 10 年前で止まっていて、1 回の操作のために十数個のボタンをクリックし、フォームを山ほど埋める。もし「カートの中身を価格順に並べて」と一言で AI に任せられるなら、ずっと楽になるはずです。

Alibaba がオープンソース化した Page Agent は、まさにそれをやるものです。公式の標語が的確です。「あなたの Web ページに住み着く GUI Agent —— 1 行のスクリプトで、どんなページにも独自の AI agent を。」 GitHub では 26.8k stars、2.4k forks、MIT ライセンス。最新版は v1.12.2（2026-07-16 リリース、累計 37 リリース）。

リポジトリ：https://github.com/alibaba/page-agent

Page Agent とは

JavaScript ベース（TypeScript 占比 82.6%）の in-page GUI Agent で、ブラウザのクライアント側で動作し、現在の Web ページの DOM を直接操作します。公式のポジショニングは明確です。クライアント側の Web ページ拡張のために設計されており、サーバー側の自動化ではない。

ここに重要な区別があります。

Page Agent の DOM 処理コンポーネントと prompt エンジニアリングは、著名な browser-use プロジェクトに由来します（公式が Acknowledgments で明示的に謝辞を記載）。ただし位置づけは異なります。解決するのは「特定の 1 つの Web ページに AI 操作能力を与えること」であって、「AI にブラウザ全体を任せて操作させること」ではありません。

動作の仕組み

4 つのコア特徴（いずれも公式 README から）です。

• 純クライアントで動作：ブラウザ拡張も、Python も、headless browser も不要。すべてあなたの Web ページの中で走ります。
• テキストベースの DOM 操作：スクリーンショットを取らず、マルチモーダル大規模モデルにも依存せず、特別な権限も不要。DOM を構造化テキストへ変換してモデルに渡し、モデルの出力を DOM 操作へ翻訳し直します。
• モデルは持ち込み（Bring Your Own LLM）：主要な大規模モデルと互換し、ローカルデプロイのモデルも使えます。
• オプションの Chrome 拡張 + MCP Server（Beta）：複数タブにまたがるタスクには拡張を使います。MCP Server は外部の agent クライアントからブラウザを逆に制御できるようにするものです。

典型的な実行フローは次のとおりです。

1. DOM の解析：現在のページ構造を読み、操作可能な要素（ボタン、入力欄、リンク、テーブル）を識別する
2. 意味の理解：DOM をモデルが理解できる構造化記述へ変換する
3. 自然言語指示の受付：たとえば「テーブルを日付の降順で並べて」「このフォームを埋めて、配送先はデフォルトの住所を使って」
4. ページ内で実行：DOM に対して直接クリック、入力、ナビゲーションなどの操作を発火する

スクリーンショットに依存しないため、デプロイは非常に軽量で、マルチモーダルモデルが持ち込むレイテンシとコストも回避できます。

組み込み方：2 つの方式

方式 1：1 行の CDN スクリプト（最速で体験）

公式が推奨する最速の始め方で、提供されている無料の Demo LLM と合わせてそのまま動かせます。

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

<!-- jsDelivr にアクセスできない場合はミラーを使う -->
<!-- https://registry.npmmirror.com/page-agent/1.12.2/files/dist/iife/page-agent.demo.js -->

⚠️ 公式が明確に述べているとおり、この demo CDN では無料のテスト用 LLM API が使われており、技術評価専用です。自分のモデルを使いたい場合は ?autoInit=false を付けてスクリプトに demo agent を自動生成させず、new window.PageAgent(...) で自前の LLM 設定を渡してインスタンス化します。

方式 2：npm によるエンジニアリング統合（製品組み込み向け）

フロントエンド/フルスタック開発者が、自社プロダクトにネイティブ統合したい場合（たとえば SaaS に AI 操作アシスタントを足す）、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: 'en-US',
})

await agent.execute('Click the login button')

設定項目は model / baseURL / apiKey / language に対応し、agent.execute(...) に自然言語のタスクを 1 文渡すだけです。Page Agent は monorepo（npm workspaces）で、コアは packages/page-agent/ にあり、UI Panel を内蔵しています。

💡 本番統合のヒント：自社プロダクトに組み込む際は、Web サイトの CSP（Content Security Policy）の制限に注意し、フロントエンドに LLM API key をハードコードしないこと。エンタープライズのシーンでは、自前の LLM ゲートウェイかプロキシ経由が推奨です。まず staging 環境で検証してからリリースしましょう。

公式が挙げる典型的ユースケース

README には 5 つの明確な use case があります。「古いサイトに AI を足す」より具体的です。

• SaaS AI Copilot：数行のコードで自社製品に AI copilot を組み込める。バックエンドの書き直しは不要
• スマートフォーム入力（Smart Form Filling）：20 回のクリックのワークフローを 1 文に圧縮。ERP / CRM / 管理画面システムに最適
• アクセシビリティ（Accessibility）：どんな Web ページも自然言語で操作できるようになり、音声指示やスクリーンリーダーに対応。ゼロ学習コスト
• ページ横断 Agent（Multi-page Agent）：Chrome 拡張でページ内 agent の能力を複数のブラウザタブへ広げる
• MCP：自前の agent クライアントがブラウザを逆に制御できるようにする

向いていないシーンは、100% の決定論が求められるミッションクリティカルな業務フローです（Agent には確率性があり、重要なチェーンは公式 API を通すほうが安定します）。

browser-use との関係

もっともよく聞かれる質問です。公式の Acknowledgments がはっきり書いています。Page Agent の DOM 処理コンポーネントと prompt は browser-use に由来する（Gregor Zunic の MIT プロジェクト）。ただし両者の位置づけは異なります。browser-use はブラウザ全体を制御し、Page Agent は現在のページの中だけで働きます。デプロイ形態はクライアント JS で、Python も headless ブラウザもブラウザ拡張も不要です。

おわりに

Page Agent は「AI に Web ページを操作させる」ことのハードルを1 行のスクリプトまで押し下げました。フロントエンド開発者にとって特に扱いやすく、クライアント JS + LLM でスクリーンショットに依存しない in-page agent をどう作るか、という点で分解に値するエンジニアリングの見本でもあります。正確な組み込み手順とデモ動画があるので、まず GitHub リポジトリの README とソースコードを直接見に行くのがおすすめです。

リポジトリ：https://github.com/alibaba/page-agent （MIT ライセンス、npm パッケージ名は page-agent、最新版は v1.12.2）

正直な申告：本文は Page Agent の公式 GitHub リポジトリ README の公開情報に基づいて執筆しました（stars / バージョン番号 / コード断片 / use case はいずれもリポジトリページから、2026-07-18 時点）。具体的な API と設定はリポジトリの最新ドキュメントを優先してください。