AI News HubLIVE
サイト内リライト5 分で読了

AlibabaのPage Agent：DOMを通じて自然言語でWebインターフェースを制御するJavaScriptページ内GUIエージェント

AlibabaのPage Agentは、Webページ内で動作するクライアントサイドJavaScriptライブラリで、スクリーンショットやマルチモーダルモデルを使わずに、ライブDOMをテキストとして読み取り、自然言語コマンドを実行します。MITライセンスでオープンソース化され、DOM脱水技術でページ構造を圧縮しコストを削減。自社アプリ内のコパイロットやフォーム入力に最適ですが、単一ページに限定され、重要な操作にはサーバー側の検証が必要です。

ソースMarkTechPost著者: Asif Razzaq

ほとんどのブラウザ自動化ツールは外部から動作します。Playwright、Puppeteer、Selenium、browser-useはいずれも外部プロセスからブラウザを駆動し、スクリーンショットやChrome DevTools Protocolを介してページを読み取ります。

AlibabaのPage Agentはその逆のアプローチを取ります。エージェントはプレーンなJavaScriptとしてWebページ内部に存在します。ライブDOMをテキストとして読み取り、実際のユーザーのように動作します。ヘッドレスブラウザ、スクリーンショット、マルチモーダルモデルは不要です。

このプロジェクトはMITライセンスの下でオープンソース化されています。コードベースはTypeScriptファーストです。browser-useをベースに構築されており、DOM処理とプロンプトはそこから派生しています。

TL;DR

  • Page Agentはページ内でJavaScriptとして動作し、スクリーンショットではなくライブDOMテキストを読み取ります。
  • DOM脱水によりページをFlatDomTreeに圧縮し、小さなテキストモデルでも正確に動作可能。
  • OpenAI互換エンドポイントを介してモデルに依存せず、MITライセンスで提供。
  • プロンプトレベルの安全性と単一ページの範囲は実際の制限であり、リスクの高い操作にはサーバー側の検証を維持すること。
  • 最適な用途：自社アプリ内のコパイロットやフォーム入力。外部サイトや制限されたサイトには不向き。

Page Agentとは？

Page AgentはWebアプリにエージェント動作を追加するためのクライアントサイドライブラリです。埋め込んで自然言語でコマンドを発行すると、エージェントがページ内で要素を検索し、ボタンをクリックし、フォームを塗りつぶします。

ブラウザセッション内で動作するため、ユーザーのCookie、セッション、認証情報を継承します。別途バックエンドを記述する必要はありません。既存のUI検証とセキュリティルールはそのまま維持されます。

設計はモデルに依存しません。OpenAI互換のエンドポイントを介して任意のLLMを使用できます。モデルにはテキストのみが送信されるため、強力なテキストモデルで十分です。

DOM脱水の仕組み

中核技術はチームがDOM脱水と呼ぶものです。現代のページには数千のノードが含まれる可能性があります。生のHTMLをモデルに送信するのは遅く、コストもかかります。

コマンドが到着すると、エージェントはDOMをスキャンします。ボタン、リンク、入力フィールドなど、すべてのインタラクティブ要素を識別します。各要素にはインデックス、ロール、ラベルが付与されます。

ライブDOMはFlatDomTreeに変換されます。これは重要な要素のクリーンなテキストマップです。冗長なマークアップは除去されます。モデルはこのコンパクトな表現を読み取り、ピクセルは使用しません。

インタラクティブデモでは、コマンド実行時に「Dehydrated DOM」と「Action trace」パネルが更新される様子を確認できます。

内部では、エージェントはPageControllerに処理を委譲します：

await this.pageController.updateTree()
await this.pageController.clickElement(index)
await this.pageController.inputText(index, text)
await this.pageController.scroll({ down: true, numPages: 1 })

モノレポではこれらの関心を小さなパッケージに分割しています。@page-agent/coreはヘッドレスエージェントのロジックを保持し、page-agentはUIパネル付きの完全なエントリクラス、@page-agent/page-controllerはDOM抽出と要素インデックスを処理し、SimulatorMaskによるオプションの視覚フィードバックを提供します。

開発者は範囲を制御できます。操作許可リストによりエージェントが実行できるアクションを制限できます。データマスキングによりパスワードなどの機密フィールドをモデルから隠せます。カスタムナレッジを注入してエージェントにドメインルールを遵守させることも可能です。

比較

| アプローチ | 実行場所 | ページの読み取り方法 | セットアップ | 最適な使用例 | | --- | --- | --- | --- | --- | | Page Agent | ページ内（クライアントサイドJS） | 脱水されたテキストDOM | 1つのscriptタグまたはnpm | 自社アプリ内のコパイロット | | Selenium / Playwright / Puppeteer | 外部プロセス | ドライバ経由のDOM（WebDriver/CDP） | ドライバ＋ランタイムまたはサーバー | スクリプト化されたE2Eテスト | | browser-use | 外部プロセス | DOM＋オプションのビジョン | Python＋ブラウザ | 自律型マルチサイトエージェント | | WebMCP | サーバーサイドツール | 構造化関数呼び出し | 標準化の採用が必要 | ネイティブエージェントツールアクセス |

重要なのはスピードではなくスコープです。Page Agentはあなたが制御しコードを追加できる製品に適しています。外部ドライバはクロスサイトスクレイピングや制限された環境で依然として優位です。

ユースケースと例

  • SaaS AIコパイロット：製品を操作するアシスタントを提供します（単なる指示ではありません）。サポートボットがユーザーに代わって手順を実行できます。
  • スマートフォーム入力：複数ステップのERPやCRMフォームを1つの指示にまとめます。ユーザーが「昨日の昼食に50ドルの旅費を申請」と入力すると、エージェントがナビゲーションとデータ入力を処理します。
  • アクセシビリティ：Web Speech APIと組み合わせて音声制御を実現します。あらゆるWebアプリが自然言語で操作可能になり、スクリーンリーダーフレンドリーな通知も提供します。
  • レガシーアプリのモダナイゼーション：APIのないレガシー内部ツールをラップします。元のコードを変更せずにコマンドバーを追加できます。

クイックスタート

評価用として、1つのscriptタグで無料のテスト用LLMを使ったPage Agentをロードできます。

<script src="https://cdn.jsdelivr.net/npm/page-agent/dist/page-agent.umd.js"></script>
<script>
  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');
</script>

このデモエンドポイントは技術評価専用です。本番環境では独自のモデル認証情報が必要です。

ビルド用には、パッケージをインストールしてエンドポイントを設定します：

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フィールドは任意のOpenAI互換プロバイダを受け入れます。モデルの切り替えは基本的にbaseURLとキーの変更のみです。

注意：new PageAgentに渡すキーはクライアントバンドルに含まれます。本番環境では、代わりに独自のバックエンド経由でリクエストをプロキシしてください。エージェントは各重要なアクションの前に承認を求めることもできます。

メリットと制限

  • 強力な統合：数行のコードでコパイロットを導入可能。バックエンドの書き換えや拡張機能の配布は不要。
  • 低モデルコスト：テキストのみの通信により、マルチモーダルモデルとその高価格を回避。精度は構造の読み取りから得られ、ピクセルからの推測ではありません。
  • プロンプトベースの安全性には限界：「決して支払いフォームを自動送信しない」といったルールはシステムプロンプトに存在します。これらは説得力的なガイドであり、ハードな保証ではありません。機密性の高い操作や破壊的な操作には、サーバー側の検証を維持してください。プロンプト指示だけを唯一の制御手段にすべきではありません。
  • 単一ページフォーカス：コアライブラリは単一ビュー内のインタラクションを対象としています。タブやウィンドウをまたいで移動することはできません。マルチページ自動化には、別途インストールと権限が必要なオプションのChrome拡張機能が必要です。ベータ版のMCPサーバーにより、Claude DesktopやCopilotなどの外部エージェントがドライブすることも可能です。

GitHubリポジトリをチェックしてください。また、Twitterでフォローしたり、150k+のML SubRedditに参加したり、ニュースレターを購読したりすることもできます。Telegramユーザーはそちらでも参加可能です。

GitHubリポジトリやHugging Faceページ、製品リリース、ウェビナーなどのプロモーションについてパートナーシップをご希望の場合は、お問い合わせください。

この記事はMarkTechPostに最初に掲載されました。