agent-browser - AIエージェントにWebブラウザの目と手を与えるCLI

💡

概要

agent-browserは、Vercel Labsによって開発された、AIエージェントがWebブラウザを操作するために設計されたCLIツール。人間が画面を見てマウスで操作するように、AIがコマンドを通じてWebサイトを閲覧・操作できます。革新的な「Ref（参照ID）システム」により、複雑なCSSセレクタの代わりに @e1, @e2 といった短いIDで要素を指定可能。AIにとって最も効率的な「目と手」を提供します。

開発元: Vercel Labs (GitHub)

10K+ GitHub Stars

100K+ npm Downloads

Rust 高速CLI基盤

Ref ID 革新的要素指定

🛠

革新的な「Ref（参照ID）」システム

          従来のWeb操作では、AIに複雑なCSSセレクタ（例: div.content > button.submit）を理解させる必要がありました。agent-browserは、snapshotコマンドで画面上の操作可能な要素に一時的な短いID（@e1, @e2など）を自動付与。AIは単に「@e2 をクリックして」と指示するだけで操作が完了します。
        

          # ページを開く

          agent-browser open "https://example.com"

          # 構造を取得（Ref IDが付与される）

          agent-browser snapshot --json

          # 要素をクリック

          agent-browser click @e2

          # フォームに入力

          agent-browser fill @e3 "Hello World"

⚡

主なコマンド

open 指定URLへ遷移

snapshot ページ構造+Ref ID取得

click 要素をクリック

fill テキスト入力

--session Cookie/ログイン状態管理

STREAM リアルタイム画面共有

🔄

Playwrightとの違い

Playwright 「人間」がJS/Pythonで
厳密なテストコードを書く

agent-browser 「AI」がその場で判断し
コマンドで即座に操作

          技術的にはPlaywrightを内部で使用していますが、設計思想が根本的に異なります。Playwrightは人間開発者向け、agent-browserはAIエージェント向け。AIにとっての「使いやすさ」を最優先に設計されています。
        

🚀

導入方法

          # インストール（即座に使用可能）

          npm install -g agent-browser

          主な用途:
          AIコーディングエージェント（Claude Code、Cursorなど）によるWeb操作
E2Eテストの自動化
Webスクレイピング
STREAM_PORTでAIの操作画面をリアルタイム監視

        

📖

スライド資料 (全14ページ)

📄 agent-browser PDFダウンロード