スクショなしでWebを操作するAIが2万スターを集めた — Alibaba page-agentの設計思想

マルチモーダルAIの時代に、あえてスクリーンショットを使わない。

AIにWebブラウザを操作させるアプローチは、ここ1年で急速に進化した。Anthropic Computer UseやOpenAI CUAは画面のスクリーンショットを撮り、視覚的に「見て」操作する。Browser UseはPlaywrightでブラウザを外部から制御する。どちらも「AIが人間のようにブラウザを見て使う」という発想に立っている。

Alibabaが公開したpage-agentは、まったく違うアプローチを取った。スクリーンショットを撮らない。ヘッドレスブラウザも起動しない。Webページの内部に直接JavaScriptとして住み着き、DOMを読んで、DOMを操作する。

GitHub 22,700スター超。7月5日にはTrending 3位に入った。

DOMを「脱水」するという発想

現代のWebページには数千のDOM要素がある。生のHTMLをそのままLLMに送れば、トークン数が爆発してコストもレイテンシも跳ね上がる。

page-agentはここで「DOM脱水（Dehydration）」という手法を使う。ページのDOMをスキャンし、インタラクティブな要素——ボタン、リンク、入力フィールド——だけを抽出して「FlatDomTree」と呼ばれるコンパクトなテキストマップに変換する。装飾用のdiv、CSSスタイル、非表示要素はすべて除去される。

LLMが受け取るのは、ページの「骨格」だけだ。スクリーンショットではなくテキストなので、マルチモーダルモデルは不要。GPT-4oやClaude Sonnet、Qwen 3.5、あるいはOllamaでローカルに動かすLlamaでも動作する。テキストモデルで十分という設計は、コストの面で大きな優位になる。

scriptタグ1行で動く

導入の手軽さは特筆に値する。

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

この1行をHTMLに追加するだけで、そのページにAIコパイロットが付く。npmからインストールしてプログラマティックに使うこともできる。

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'gpt-4o',
    baseURL: 'https://api.openai.com/v1',
    apiKey: 'YOUR_KEY',
})

await agent.execute('ログインボタンをクリックして')

重要なのは、page-agentがブラウザ内で動くため、ユーザーのクッキーやセッション、認証情報をそのまま引き継ぐことだ。外部ツールのように「まずログインさせる」手順が要らない。すでにログイン済みの状態でAIが操作を代行する。

3分の作業が35秒になった実例

物流企業の管理画面を対象にした4週間の実地テストでは、30フィールドある注文作成フォームの入力が3分から35秒に短縮されたという報告がある。チームはテスト後、正式にワークフローに組み込むことを決めた。

想定される用途は幅広い。SaaSアプリへのAIコパイロット埋め込み、ERPやCRMの複雑な操作の自動化、データ抽出、Webアクセシビリティの向上。Chrome拡張版を使えばタブをまたいだ複数ページの操作も可能だ。MCPサーバー（ベータ版）を通じた外部エージェントからの制御にも対応している。

Browser Useとは何が違うのか

page-agentはBrowser Useのオマージュを公式に認めている。DOM処理のパターンはBrowser Useから派生したものだ。ただし設計思想は大きく異なる。

	page-agent	Browser Use	Playwright
実行場所	ブラウザ内（クライアントJS）	外部Pythonプロセス	外部プロセス
スクショ	不要	ハイブリッド	不要
LLM要件	テキストモデルで可	マルチモーダル推奨	不要
認証	ユーザーセッション継承	別途設定	別途設定
サーバーサイド実行	不可	可	可
複数ページ	Chrome拡張が必要	ネイティブ対応	ネイティブ対応

Firecrawlのブラウザエージェント比較レポートでは、DOM駆動型のアプローチはスクリーンショット駆動型に対して一般的なタスクで12〜17ポイント高い成功率を示すとされている。

正直な限界

page-agentは万能ではない。

ブラウザ内でしか動作しないため、サーバーサイドの定期実行やヘッドレスでのスクレイピングには使えない。そういう用途にはBrowser UseやPlaywrightが適している。

LLMが操作を計画する以上、実行は確率的だ。決済処理や規制対象のワークフローなど、100%の正確性が求められる場面には向かない。Reactの深いコンポーネントツリーやShadow DOMを多用したUIでは、DOM脱水がうまくいかないケースも報告されている。

そして根本的に、「ユーザーがブラウザを開いている」ことが前提だ。無人で夜間に動かすようなバッチ処理には使えない。

「ページの中に住むAI」という可能性

page-agentの最大の貢献は、GUIエージェントの設計空間に新しい軸を加えたことだろう。外からブラウザを操るのではなく、ページの中に入り込む。このアプローチが特にフィットするのは、自社のWebアプリにAIコパイロットを埋め込みたいSaaS事業者だ。バックエンドのインフラ構築なしで、scriptタグ1行でAI操作機能を足せる。

MITライセンス、無料、テキストモデルで動作。ブラウザ自動化の「第三の選択肢」として、試す価値はある。