自然言語でWebページを操作！ブラウザ内で動くAIアシスタント — page-agent

alibaba/page-agentTypeScript8.0k

Page Agentは、Webページの中に組み込むだけで、自然言語（日本語や英語などの普通の言葉）でWebサイトの操作を自動化できるJavaScriptツールです。ブラウザ拡張機能やPython、特別なサーバーの準備は不要で、たった1行のコードをWebページに追加するだけで動き始めます。スクリーンショットを撮る方式ではなく、ページの構造（テキスト情報）を読み取って操作するため、画像認識AIのような高価なモデルも不要です。好きなAIモデル（LLM）を接続して使えるので、自社のAIサービスと組み合わせることもできます。SaaS製品にAIアシスタントを手軽に搭載したい開発者や、複雑なフォーム入力を簡単にしたい業務システム担当者に特におすすめです。

🔥 なぜ話題？

ブラウザ操作を自動化するAIエージェント（browser-useなど）が大きな注目を集める中、Page Agentはサーバーサイドではなくクライアントサイド（Webページ内）で動作するという独自のアプローチで差別化しています。Alibaba発のOSSであり、1行のコードで試せる手軽さとHacker Newsでの話題性が急速なスター獲得につながっています。

💡 こう使える！

例えば、社内の経費精算システムで20個以上の入力欄がある複雑なフォームに対して、『出張日は6月10日、交通費は新幹線で15,000円、宿泊費は東京のホテルで12,000円で申請して』と一言入力するだけで、Page Agentが各フィールドに自動で値を入力してくれます。

ユースケース: 自社のWebサービスやSaaSに「自然言語で操作できるAIアシスタント」を手軽に組み込むために使う

ブラウザ拡張もPythonも不要、JavaScript1行でWebページにAI操作エージェントを追加
スクリーンショット不要のテキストベースDOM解析で軽量・高速に動作
好きなLLM（AIモデル）を自由に接続して利用可能

GitHubで見る →

JavaScript in-page GUI agent. Control web interfaces with natural language.

技術情報

言語

TypeScript

ライセンス

MIT

最終更新

2026-03-13

スター数

7,968

フォーク数

618

Issue数

トピック

agentaiai-agentsbrowser-automationjavascripttypescriptui-automationweb

技術詳細

アーキテクチャ・仕組み

クライアントサイド完結: サーバーサイドの自動化ツール（Puppeteer、Playwrightなど）とは異なり、ブラウザ内のJavaScriptとしてWebページ上で直接動作する
テキストベースDOM操作: スクリーンショットを使わず、ページのDOM構造（HTMLの要素）をテキストとして解析し操作する方式。マルチモーダルLLM（画像を理解するAI）が不要
browser-useからの派生: DOMの処理コンポーネントとプロンプトは、サーバーサイドWeb自動化ツール「browser-use」から派生している

対応環境・技術スタック

言語: TypeScript
配信形式: npm パッケージ / CDN（IIFE形式）
バンドルサイズ: minzip対応（軽量）
中国ミラー: npmmirrorでも配信されており、中国国内からのアクセスにも対応

主要な機能一覧

自然言語でのWeb操作: 「ログインボタンをクリック」のような命令でUI操作を実行
任意のLLM接続（BYOM: Bring Your Own Model）: 自前のAPIキーで好きなLLMを使用可能。デモではQwen 3.5 Plusが使用されている
Human-in-the-loop UI: AIの操作を人間が確認・承認できるUIが組み込まれている
Chrome拡張（オプション）: 複数ページにまたがるタスクに対応するChrome拡張機能を提供
多言語対応: languageパラメータで言語を指定可能

ユースケース詳細

ユースケース	説明
SaaS AIコパイロット	製品にAIアシスタントを数行のコードで組み込み。バックエンドの書き換え不要
スマートフォーム入力	20クリックのワークフローを1文に。ERP/CRM/管理画面に最適
アクセシビリティ	音声コマンドやスクリーンリーダーでのWeb操作をサポート
マルチページエージェント	Chrome拡張でブラウザタブをまたいだ操作が可能

競合・類似ツールとの違い

browser-use: サーバーサイド（Python + ヘッドレスブラウザ）での自動化ツール。Page Agentはクライアントサイドのみで動作
一般的なブラウザ拡張型エージェント: ブラウザ拡張のインストールが必要。Page AgentはJavaScriptの埋め込みだけで動作
スクリーンショットベースのエージェント: マルチモーダルLLMが必要でコストが高い。Page Agentはテキストベースで軽量

制約・注意点

無料テストAPIはあくまで技術評価用であり、本番利用には自分のLLM APIキーが必要
テストAPIの利用には利用規約への同意が必要
ボットやAIエージェントのみで生成されたコントリビューションは受け付けない方針

ライセンス

MIT License: 商用利用を含め自由に利用可能

インストール・クイックスタート

CDNで即座に試す（1行で導入）

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

※ 上記は無料のテスト用AI APIを使用するデモ版です。技術評価用途のみ。

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')