アリババのページエージェント：DOM を介して自然言語で Web インターフェースを制御する JavaScript 内蔵 GUI エージェント
本文の状態
日本語全文を表示中
詳細モードで約8分の本文を読めます。
同じ出来事の情報源
この情報源を基点に整理
MarkTechPost
アリババが公開したオープンソースプロジェクト「Page Agent」は、外部プロセスではなくウェブページ内に JavaScript として埋め込まれ、スクリーンショットや多モーダルモデルを使わずに DOM を直接読み取って自然言語で Web インターフェースを操作する技術です。
Source Article
元記事を日本語で読む
本文に関係しない購読案内、埋め込み通知、サイト内プロモーションは除いています。
ほとんどのブラウザ自動化は外部から実行されます。Playwright、Puppeteer、Selenium、browser-use はいずれも外部プロセスからブラウザを操作します。これらはスクリーンショットまたは Chrome DevTools Protocol を通じてページを読み取ります。
Alibaba の Page Agent は逆の道筋を取ります。エージェントは通常の JavaScript としてウェブページ内部に存在し、生きた DOM（Document Object Model）をテキストとして読み取り、実際のユーザーのように振る舞います。ヘッドレスブラウザもスクリーンショットも、マルチモーダルモデルも不要です。
このプロジェクトは MIT ライセンスの下でオープンソース化されています。コードベースは TypeScript が中心です。その DOM 処理とプロンプトは browser-use に基づいて構築されています。
TL;DR
Page Agent は JavaScript としてページ内部で動作し、スクリーンショットではなく生きた DOM をテキストとして読み取ります。
DOM dehydration（DOM 脱水）により、ページが FlatDomTree 形式に圧縮され、より小さなテキストモデルでも精密な操作が可能になります。
OpenAI と互換性のあるあらゆるエンドポイントを通じてモデル非依存で動作し、MIT ライセンスの下で提供されます。
プロンプトレベルの安全性とシングルページの範囲が実際の制限です。危険なアクションについてはサーバーサイドでの検証を維持してください。
最も適した用途：あなたが所有するアプリ内でのコパイロット機能やフォーム入力。外部サイトやロックダウンされたサイトには向きません。
Page Agent とは何か？
Page Agent は、ウェブアプリケーションにエージェント機能を追加するためのクライアントサイドライブラリです。これを埋め込み、自然言語でコマンドを発行します。エージェントはページ内部から要素を見つけ、ボタンをクリックし、フォームに入力を行います。
ブラウザセッション内で実行されるため、ユーザーのクッキー、セッション、認証情報をそのまま継承します。別途バックエンドを記述する必要はありません。既存の UI 検証ルールやセキュリティ規則もそのままで維持されます。
この設計はモデルに依存しません。OpenAI と互換性のあるエンドポイントを通じて、任意の大規模言語モデル（LLM）を自分で用意するだけです。モデルへ送信されるのはテキストのみであるため、強力なテキスト処理モデルがあれば十分です。
DOM デヒドレーションの仕組み
チームが「DOM デヒドレーション」と呼ぶのが中核となる技術です。現代のページには数千ものノードが存在し得ます。生きた HTML をそのままモデルに送信すると、処理が遅くコストも高くなります。
コマンドが到着すると、エージェントは Document Object Model（DOM）をスキャンします。すべてのインタラクティブな要素、つまりボタン、リンク、入力フィールドなどを特定します。各要素にはインデックスに加え、役割とラベルが付与されます。
ライブ状態の DOM は「FlatDomTree」という形式に変換され、重要な部分のみを表すクリーンなテキストマップになります。冗長なマークアップは除去され、モデルが読み込むのはピクセルではなく、このコンパクトな表現です。
このページ上のインタラクティブデモも、このループをそのまま反映しています。「Dehydrated DOM」パネルと「Action trace」パネルがコマンド実行時にどのように更新されるかをご覧ください。
内部では、エージェントは PageController に作業を委譲します。
Copy CodeCopiedUse a different Browser
await this.pageController.updateTree()
await this.pageController.clickElement(index)
await this.pageController.inputText(index, text)
await this.pageController.scroll({ down: true, numPages: 1 })
このモノレポ（monorepo）は、これらの関心を小さなパッケージに分割しています。@page-agent/core はヘッドレスエージェントのロジックを保持します。page-agent は UI パネルを備えた完全なエントリークラスです。@page-agent/page-controller は DOM の抽出と要素のインデックス付けを担当し、SimulatorMask を介してオプションの視覚フィードバックを提供します。
開発者はスコープの制御を維持します。操作許可リスト（allowlists）により、エージェントが実行できるアクションを制限できます。データマスキングにより、パスワードなどの機密フィールドをモデルから隠すことができます。カスタム知識を注入することで、エージェントがドメインルールに従うようにすることも可能です。
比較について
アプローチ | 実行場所 | ページの読み取り方法 | セットアップ | 最適な用途
Page Agent | ページ内部（クライアントサイド JS） | 脱水性 DOM テキスト | スクリプトタグまたは npm の一つ | あなたが所有するアプリ内の Copilots
Selenium / Playwright / Puppeteer | 外部プロセス | ドライバー経由の DOM (WebDriver/CDP) | ドライバーとランタイム、またはサーバー | スクリプトによるエンドツーエンドテスト
browser-use | 外部プロセス | DOM とオプションのビジョン | Python とブラウザ | 自律的な複数サイトエージェント
WebMCPServer-side tools | サーバーサイドツール | 構造化関数呼び出し | 標準採用が必要 | ネイティブエージェントツールのアクセス
要点は速度ではなくスコープです。Page Agent は、あなたが制御できコードを追加できる製品に適しています。クロスサイトスクレイピングやロックされた環境では、外部ドライバーが依然として優位性を保ちます。
ユースケースと例
SaaS AI コパイロット：指示を与えるだけでなく、製品自体を操作するアシスタントをリリースしてください。サポートボットは手順を説明するのではなく、ユーザーの代わりにそのステップを実行できます。
スマートフォーム入力：多段階の ERP または CRM フォームを 1 つの指示に集約します。ユーザーが「昨日の昼食費として 50 ドルの出張経費を提出する」と入力すると、エージェントがナビゲーションとデータ入力を処理します。
アクセシビリティ：Web Speech API と連携して音声制御を実現します。あらゆる Web アプリが自然言語で操作可能になり、スクリーンリーダー対応のアナウンスも提供されます。
レガシーアプリの近代化：API を持たない既存の内部ツールをラップできます。元のコードを変更せずにコマンドバーを追加するだけです。
クイックスタート
評価用には、1 つのスクリプトタグで Page Agent を読み込み、無料のテスト LLM を使用します：
Copy CodeCopiedUse a different Browser
このデモエンドポイントは技術的な評価専用です。本番環境での利用には、独自のモデル認証情報が必要です。
ビルドするには、パッケージをインストールしてエンドポイントを構成してください：
Copy CodeCopiedUse a different Browser
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 互換のあらゆるプロバイダーを指定できます。モデルの切り替えは、主にベース URL とキーの変更で済みます。
注記：PageAgent の new メソッドに渡されるキーは、クライアントバンドル内に含まれます。本番環境では、ご自身のバックエンドを介してリクエストのプロキシ化を行ってください。また、実行前に各重要なアクションについて承認を求める表示も可能です。
何が可能で何が不可能か
強力な統合ストーリー：コパイロットは数行のコードで提供されます。バックエンドの書き換えや配布用の拡張機能は不要です。
モデルコストの削減：テキストのみが移動するため、マルチモーダルモデルとその価格設定を回避できます。精度はピクセルからの推測ではなく、構造の読み取りによって得られます。
プロンプトベースの安全性には限界がある：「支払いフォームを自動的に送信しない」などのルールはシステムプロンプト内に記述されます。これらは説得力のあるガイドラインであり、絶対的な保証ではありません。機密性が高いまたは破壊的なアクションについては、サーバーサイドでの検証を維持してください。プロンプトによる指示のみが唯一の制御手段であってはなりません。
シングルページへの焦点：コアライブラリは1つのビュー内でのインタラクションを対象としています。タブやウィンドウ間を移動することはできません。複数ページにわたる自動化には、オプションの Chrome 拡張機能が必要です（別途インストールと権限許可が必要）。また、Beta MCP サーバーを使用することで、Claude Desktop や Copilot などの外部エージェントがこれを操作することも可能です。
記事「Alibaba の Page Agent にようこそ：DOM を介して自然言語で Web インターフェースを制御する JavaScript 在ページ GUI エージェント」は、MarkTechPost で最初に公開されました。
原文を表示
Most browser automation runs from the outside. Playwright, Puppeteer, Selenium, and browser-use all drive a browser from an external process. They read the page through screenshots or the Chrome DevTools Protocol.
Alibaba’s Page Agent takes the opposite path. The agent lives inside the webpage as plain JavaScript. It reads the live DOM as text and acts as the real user. No headless browser, no screenshots, no multi-modal model.
The project is open-source under the MIT license. The codebase is TypeScript-first. It builds on browser-use, from which its DOM processing and prompt are derived.
TL;DR
Page Agent runs inside the page as JavaScript, reading the live DOM as text, not screenshots.
DOM dehydration compresses the page into a FlatDomTree so smaller text models can act precisely.
It is model-agnostic through any OpenAI-compatible endpoint and ships under the MIT license.
Prompt-level safety and single-page scope are real limits; keep server-side validation for risky actions.
Best fit: copilots and form-filling inside apps you own, not external or locked-down sites.
What is Page Agent?
Page Agent is a client-side library for adding agent behavior to a web app. You embed it, then issue commands in natural language. The agent finds elements, clicks buttons, and fills forms from within the page.
Because it runs in the browser session, it inherits the user’s cookies, session, and authentication. There is no separate backend to write. The existing UI validation and security rules stay in place.
The design is model-agnostic. You bring your own large language model through any OpenAI-compatible endpoint. Only text is sent to the model, so a strong text model is enough.
How DOM Dehydration Works
The core technique is what the team calls DOM dehydration. A modern page can hold thousands of nodes. Sending raw HTML to a model would be slow and expensive.
When a command arrives, the agent scans the Document Object Model. It identifies every interactive element, such as buttons, links, and input fields. Each element receives an index plus a role and a label.
The live DOM is converted into a FlatDomTree, a clean text map of what matters. Redundant markup is stripped out. The model reads this compact representation, not pixels.
The interactive demo on this page mirrors this loop. Watch the “Dehydrated DOM” and “Action trace” panels update as commands run.
Under the hood, the agent delegates work to a PageController:
Copy CodeCopiedUse a different Browser
await this.pageController.updateTree()
await this.pageController.clickElement(index)
await this.pageController.inputText(index, text)
await this.pageController.scroll({ down: true, numPages: 1 })
The monorepo splits these concerns into small packages. @page-agent/core holds the headless agent logic. page-agent is the full entry class with a UI panel. @page-agent/page-controller handles DOM extraction and element indexing, with optional visual feedback through a SimulatorMask.
Developers keep control of scope. Operation allowlists limit which actions the agent may run. Data masking can hide sensitive fields, such as passwords, from the model. Custom knowledge can be injected so the agent follows your domain rules.
How It Compares
ApproachWhere it runsReads the page viaSetupBest fit
Page AgentInside the page (client-side JS)Dehydrated text DOMOne script tag or npmCopilots inside apps you own
Selenium / Playwright / PuppeteerExternal processDOM via driver (WebDriver/CDP)Driver plus runtime or serverScripted end-to-end testing
browser-useExternal processDOM plus optional visionPython plus a browserAutonomous multi-site agents
WebMCPServer-side toolsStructured function callsRequires standard adoptionNative agent tool access
The takeaway is scope, not speed. Page Agent fits products you control and can add code to. External drivers still win for cross-site scraping and locked-down environments.
Use Cases, With Examples
SaaS AI copilot: Ship an assistant that operates the product, not one that only gives instructions. A support bot can perform the steps for the user instead of describing them.
Smart form filling: Collapse a multi-step ERP or CRM form into one instruction. A user types ‘Submit a travel expense for $50 for lunch yesterday.’ The agent handles the navigation and data entry.
Accessibility: Pair it with the Web Speech API for voice control. Any web app becomes reachable through natural language, with screen-reader friendly announcements.
Legacy app modernization: It can wrap a legacy internal tool that has no API. You add a command bar without changing the original code.
Quick Start
For evaluation, one script tag loads Page Agent with a free testing LLM:
Copy CodeCopiedUse a different Browser
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js" crossorigin="true"></script>
That demo endpoint is for technical evaluation only. Production use needs your own model credentials.
For a build, install the package and configure your endpoint:
Copy CodeCopiedUse a different Browser
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')
The model and baseURL fields accept any OpenAI-compatible provider. Swapping models is mostly a base-URL and key change.
Note: a key passed to new PageAgent ships inside your client bundle. For production, proxy requests through your own backend instead. The agent can also show each critical action for approval before running it.
What Works and What Doesn’t
Strong integration story: A copilot ships in a few lines of code. There is no backend rewrite and no extension to distribute.
Lower model cost: Because only text moves, you avoid multi-modal models and their pricing. Precision comes from reading structure, not guessing from pixels.
Prompt-based safety has limits: Rules like “never auto-submit a payment form” live in the system prompt. These are persuasive guides, not hard guarantees. For sensitive or destructive actions, keep server-side validation. Prompt instructions should not be your only control.
Single-page focus: The core library targets interactions within one view. It cannot move across tabs or windows by itself. Multi-page automation needs the optional Chrome extension, which requires separate install and permissions. A Beta MCP server also lets outside agents, like Claude Desktop or Copilot, drive it.
Check out the GitHub Repo. Also, feel free to follow us on Twitter and don’t forget to join our 150k+ML SubReddit and Subscribe to our Newsletter. Wait! are you on telegram? now you can join us on telegram as well.
Need to partner with us for promoting your GitHub Repo OR Hugging Face Page OR Product Release OR Webinar etc.? Connect with us
The post Meet Alibaba’s Page Agent: A JavaScript In-Page GUI Agent That Controls Web Interfaces With Natural Language Through the DOM appeared first on MarkTechPost.
関連記事
今日のまとめ
AIデイリーブリーフで今日の重要ニュースをまとめ読み