skip to content
日替わり OSS
Table of Contents

リポジトリ

Page Agent とは

Page Agentは、ウェブページ内で動作するJavaScriptベースのGUIエージェントであり、自然言語によるウェブインターフェースの操作を可能にする画期的なライブラリです。ブラウザ拡張や外部ツールに依存せず、ウェブページ内のJavaScriptだけで完結するため、既存のアプリケーションに手軽に自然言語操作機能を追加できます。

その核心は、スクリーンショット解析やマルチモーダルモデルに頼らず、テキストベースでDOM（Document Object Model）を直接理解・操作する点にあります。これにより、高速かつ効率的な処理を実現しつつ、開発者が自由に選択したLLM（大規模言語モデル）を連携させる「Bring Your Own LLM (BYOLLM)」モデルを採用しています。これにより、コストや要件に応じた柔軟なモデル選択が可能です。

オプションとして、複数ページにわたるタスクに対応するためのChrome拡張機能や、外部からのブラウザ制御を可能にするMCP (Multi-Control Protocol) サーバーも提供され、高度な自動化シナリオにも対応します。

なぜ Page Agent が注目されるのか

Page Agentが注目される主な理由は、その導入の手軽さ、柔軟性、そして効率性にあります。

1. 開発者フレンドリーな手軽な導入

Page Agentは、たった一行のJavaScriptコードをウェブページに埋め込むだけで動作を開始します。これにより、バックエンドの改修や複雑なインフラ設定を伴うことなく、既存のウェブアプリケーションに自然言語による操作機能を迅速に組み込むことが可能です。SaaS提供者が自社製品にコパイロット機能を統合する際の開発障壁を劇的に低減します。

2. LLMの選択肢と効率的なDOM操作

特定のLLMに縛られず、OpenAIやAnthropic、あるいは自社モデルなど、プロジェクトのニーズに合わせて自由にLLMを選択できる柔軟性を持っています。また、画像認識に頼らず、HTML構造を直接解析するテキストベースのDOM操作を採用しているため、リソース消費が少なく高速で、UI変更に対する堅牢性も高いという利点があります。

3. 広範なユースケースへの対応力

SaaS製品のコパイロット機能から、エンタープライズシステムのスマートフォーム入力、ウェブアクセシビリティの向上、さらには複数ページにわたるタスクの自動化まで、多岐にわたる課題解決に貢献できる汎用性の高さも魅力です。

Page Agent で何ができるのか

Page Agentは、多様なシナリオでウェブアプリケーションの操作を効率化・自動化する機能を提供します。

  • SaaSコパイロット機能の実装: ユーザーが自然言語で指示を出すだけで、複雑な操作を簡略化したり、特定のタスクを自動実行したりするコパイロット機能を、既存のSaaS製品に容易に組み込むことができます。「このレポートを生成して共有」といった指示で、複数のステップを自動実行し、ユーザー体験を向上させます。
  • スマートフォーム入力とワークフロー自動化: ERPやCRMなどの業務システムで、多数のフォーム入力や繰り返し作業が多い場合に威力を発揮します。「今日の売上データを入力して承認」といった指示一つで、複数のフィールドへのデータ投入やボタンクリックなど、一連の操作を自動化し、従業員の生産性を高めます。
  • ウェブアクセシビリティの向上: 音声コマンドや簡略化された自然言語操作を通じて、ウェブアプリケーションの利用障壁を低減します。視覚・運動機能に障がいを持つユーザーが、より直感的にウェブサービスを利用できるよう支援します。
  • 複数ページにわたるタスクの自動化: Chrome拡張機能と連携することで、単一ページだけでなく、複数のブラウザタブやページ遷移を伴う複雑なタスクも自動化できます。これにより、情報収集やデータ連携といったウェブベースのRPAのような活用も可能です。

どんな現場で役立つか

Page Agentは、以下の様な現場で特にその価値を発揮するでしょう。

  • SaaS開発企業: ユーザー体験を差別化し、競合に先駆けて自然言語UIを導入したいSaaSベンダー。
  • エンタープライズアプリケーション開発者: 社内システムの操作性改善や、定型業務の自動化を進めたい企業。既存システムの改修なしに生産性向上を図れます。
  • ウェブアクセシビリティ改善担当者: 既存のウェブサイトやアプリケーションを、より多くの人が利用できるように改善するプロジェクト。
  • フロントエンド開発者: 自身の開発するUIに高度なインタラクティブ性や自動化機能を組み込みたいJavaScript/TypeScriptエンジニア。
  • 品質保証 (QA) / テストエンジニア: 定型的なUI操作のテストスクリプト作成補助や、探索的テストにおける操作生成の補助ツールとして。

導入と利用

Page Agentの導入は非常にシンプルです。用途に応じて、CDN経由での試用か、NPMパッケージとしてのインストールを選択できます。

CDN経由での試用

以下のスクリプトタグをHTMLに埋め込むだけで、Page Agentが提供する無料のテスト用LLM APIを利用して機能を試すことができます。

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

NPMを利用した本格的な導入

より柔軟な制御や独自のLLMとの連携を行う場合は、NPMでインストールし、JavaScript/TypeScriptコード内で利用します。

Terminal window
npm install page-agent

インストール後、以下のようにPageAgentインスタンスを生成し、自然言語で指示を与えて操作を実行します。model、baseURL、apiKeyで独自のLLMを設定可能です。

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

まとめ

Page Agentは、ウェブアプリケーションに自然言語による操作機能と自動化を統合するための、強力かつ手軽なソリューションです。ブラウザ拡張や外部ツールに依存せず、インページで完結する設計思想は、SaaS製品のコパイロット機能実装から、エンタープライズシステムの効率化、ウェブアクセシビリティの向上まで、幅広いユースケースに対応します。

開発者は、Page Agentを導入することで、ユーザーに革新的な体験を提供し、ウェブ操作の未来を再定義する可能性を秘めています。手軽な導入、LLMの柔軟性、そしてテキストベースの効率的なDOM操作という強みを活かし、あなたのプロジェクトに新たな価値をもたらすことができるでしょう。このオープンソースプロジェクトの今後の進化と、コミュニティによるさらなる活用事例の創出に大いに期待が寄せられています。