Alibaba製「Page Agent」でWebページをAI操作：npm installだけで始めるブラウザ自動化

ブラウザの自動化ツール、いろいろありますよね。Playwright、Puppeteer、Selenium。でもどれもセットアップが面倒だったり、ヘッドレスブラウザが必要だったりする。

そこに「npm installだけで動くブラウザAI操作」をぶち込んできたのがAlibabaのPage Agentです。

Page Agentとは

Alibabaがオープンソース（MITライセンス）で公開しているブラウザ自動化ツール。GitHubスターは2,900超え、v1.5.4が3月9日にリリースされています。683コミットとかなり活発。

何がすごいかというと、サーバーが要らない。Pythonも要らない。ヘッドレスブラウザも要らない。クライアントサイドだけで完結します。

npm install page-agent して、APIキーを設定して、動かすだけ。これだけでAIがブラウザを操作してくれます。

セットアップ

本当にシンプルです。

Node.jsが入っている環境で npm install page-agent を実行。設定ファイルにOpenAI、Claude、QwenなどのAPIキーを入れる。以上。

BYOK（Bring Your Own Key）方式なので、データが外部サーバーに送信されることはありません。APIキーを使って直接LLMとやり取りします。プライバシーが気になる人にはありがたい設計です。

LLMバックエンドはGPT、Claude、Qwenに対応。僕はClaudeで試しました。

Chrome DevTools MCPとの違い

僕は普段、Chrome DevTools MCPを使ってブラウザ操作をAIに任せています。これとPage Agentは何が違うのか。

Chrome DevTools MCPはChromeのDevToolsプロトコルを通じてブラウザを制御します。MCPサーバーが必要で、Claude Codeなどのクライアントから呼び出す形。できることは多いけど、セットアップにはそれなりの手間がかかる。

Page Agentはもっと軽い。npmパッケージひとつで完結するし、既存のWebアプリケーションに組み込むことも想定されています。フロントエンド開発者が「ちょっとAIにページ操作させたい」というユースケースにぴったり。

逆に言うと、Chrome DevTools MCPのほうが低レベルな制御ができるので、複雑なデバッグやパフォーマンス計測には向いています。用途次第で使い分けるのがベストです。

使いどころ

Page Agentが輝くシーンをいくつか考えてみました。

E2Eテストの自動生成。「このページのフォームに適当なデータを入れて送信して」みたいな指示を自然言語で投げられる。テストコードを書く前のプロトタイピングに使えます。

Webスクレイピング。構造化されていないページから情報を抜き出すのにAIの理解力が活きる。セレクタを書かなくても「この表の3列目のデータを取って」で動く。

社内ツールの操作自動化。毎日同じ管理画面でポチポチやっている作業をPage Agentに任せる。RPAの軽量版みたいな使い方です。

フロントエンドにAIが住む時代

Page Agentを触っていて思ったのは、AIとブラウザの距離がどんどん縮まっているということ。

少し前まで「AIにブラウザを操作させる」にはかなりの仕込みが必要でした。今はnpm installひとつ。しかもクライアントサイドで完結する。

Alibabaがこれをオープンソースで出した意図も気になるところです。おそらくAlibaba Cloud関連のサービスとの連携を見据えているんでしょうが、MITライセンスなので自由に使えます。

フロントエンド開発者なら一度触っておいて損はないプロジェクトです。