🐋

AIエージェント向けのブラウザ操作を可能にするagent-browserを試してみた

2026/01/13に公開

Playwright

agentbrowser

tech

はじめに

皆さんはAIを使ってこんなことをやりたいな〜と思ったことはありませんか？

「Markdownで書かれたテストファイルに基づいて自動テストを行いたい」
「あるページの情報を自動で取得したい」

このようなブラウザ操作をAIに行わせるのに使用されているのがPlaywright MCP や　ChromeDevTools といったMCPツールでしょう。
確かに使ってみればブラウザ操作を自動で行ってくれてすげえ！！！となるのですがコンテキストを圧迫してしまうという本質的な問題を抱えています。

こうした問題を解決してくれそうな Vercel の agent-browserというツールがXで話題だったので早速使用感をまとめてみました。Githubリポジトリはこちら

agent-browserはPlaywright MCP と異なるアーキテクチャを採用しており、コンテキスト効率を大幅に改善しながらブラウザ操作を実現できるとのこと。実力はいかに。

`agent-browser`を導入してみる

公式ドキュメントに沿ってまずはインストールしてみます。今回は推奨されているnpmでやってみます。

npm install -g agent-browser
agent-browser install  # chromium ブラウザをインストール

agent-browser の基本的な使い方

早速agent-browserを使ってみます。ターミナルでagent-browser {コマンド}で実行できるようです。

agent-browser open

バックグランドで起動したPlaywrightがURLを開く。（最初は実際にブラウザが立ち上がるわけではないのでイケてる？となりました）

# example.com を開く
> agent-browser open example.com

# 出力結果
✓ Example Domain
  https://example.com

agent-browser snapshot

ブラウザ上の要素の階層構造であるアクセサビリティツリーを取得することが可能

# アクセサビリティツリーを取得
agent-browser snapshot

# 出力結果
document:
- heading "Example Domain" [ref=e1] [level=1]
- paragraph: This domain is for use in documentation examples without needing permission. Avoid use in operations.
- paragraph:
	- link "Learn more" [ref=e2]:
		- /url: https://iana.org/domains/example

agent-browser set credentials {ユーザー名} {パスワード}

Basic認証のダイアログにユーザー名とパスワードを入力する際に使用

agent-browser set credentials test@example.com password

agent-browser x Claude code

agent-browser をClaude codeと合わせて使用する方法も紹介します。

AGENTS.md / CLAUDE.md に以下のようにagent-browserの操作を記載することでブラウザ操作を可能にしてくれます。

CLAUDE.md

## Browser Automation

Use `agent-browser` for web automation. Run `agent-browser --help` for all commands.

Core workflow:
1. `agent-browser open <url>` - Navigate to page
2. `agent-browser snapshot -i` - Get interactive elements with refs (@e1, @e2)
3. `agent-browser click @e1` / `fill @e2 "text"` - Interact using refs
4. Re-snapshot after page change

またClaude codeの場合、Claudeのスキル機能を使えばagent-browserのコマンドを登録できます。
SKILL.mdは公式ドキュメントからインストール可能です。

agent-browser の使用例

agent-browser を使用する一例として Markdownファイルで書かれたテストファイルを基にagent-browser がブラウザ操作を行い自動テストを行うみたいなことができそうですね。
例えばログイン画面に関するテスト（チェックリストみたいなイメージです）ファイル login.test.md を用意 → agent-browser がログイン操作を行うような流れです。

// 例
.
├── .github/
│   └── workflows/
│       └── e2e.yml
├── .claude/
│   └── slills/
│       └── agent-browser/
│           └── SKILL.md
├── tests/
│   ├── .tmp/
│   │   ├── login.test.result.md
│   │   └── logut.test.result.md
│   ├── login.test.md
│   ├── logout.test.md
│   └── test-result-template.md
└── CLAUDE.md

CIに組み込むなら以下のようにするイメージですね。

.github/workflows/e2e.yml

// .github/workflows/e2e.yml
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1

      - name: Install agent-browser
        run: npm install -g agent-browser

      - name: Install Playwright browsers
        run: agent-browser install --with-deps

      - name: Run E2E tests
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude -p "tests/login.test.md のテストを実行して" \
            --allowedTools "Bash,Read" \
            --max-turns 50