目次
Claude Codeにブラウザを操作させたくて、agent-browserを試してみました。調べてみたので備忘録です。
Playwright MCPではダメなのか
Claude Codeでブラウザを操作するなら、Playwright MCPを使うのが一般的です。ただ、いくつか困ることがあります。
Playwright MCPはページ全体のDOM情報をClaude Codeに渡すので、コンテキストをかなり消費します。また、CSSセレクタで要素を指定するとき、Claude Codeが「このセレクタで合ってるかな」と迷うことがあります。
agent-browserの良いところ
agent-browserは、こうした問題を解決するために作られたCLIツールです。公式によると、Playwright MCPと比べて93%もコンテキストを削減できるそうです[1]。
特徴的なのは refs という仕組みです。snapshot コマンドを実行すると、ページ上の要素に @e1、@e2 のような一意のIDが振られます。Claude Codeはこのrefsを使って要素を操作するので、セレクタで迷うことがなくなります。
もう一つ良いのは、CLIが自己文書化されていることです。--help を実行すれば全コマンドの使い方がわかるので、Claude Codeが自分で学習できます。
インストール
npmでグローバルインストールします。
npm install -g agent-browser
次にChromiumをダウンロードします。
agent-browser install
Linuxの場合は依存関係も一緒にインストールします。
agent-browser install --with-deps
Claude Codeに使わせる方法
Claude Codeにagent-browserを使わせる方法は2つあります。
CLAUDE.mdに追記する
プロジェクトの CLAUDE.md にワークフローを書いておくと、Claude Codeがブラウザ操作を頼まれたときに一貫した動きをするようになります。
## ブラウザ自動化
Webの操作には agent-browser を使用する。詳細は agent-browser --help を参照。
基本ワークフロー：
1. agent-browser open <url> - ページを開く
2. agent-browser snapshot -i - インタラクティブ要素をrefsつきで取得
3. agent-browser click @e1 / fill @e2 "text" - refsで操作
4. ページ遷移後は再度snapshotを取る
スキルをインストールする
公式のスキルをインストールする方法もあります[2]。スキルには全コマンドの説明と使用例が入っていて、Claude Codeがより正確にブラウザ操作できるようになります。
まずディレクトリを作成します。
mkdir -p .claude/skills/agent-browser
次にスキルファイルをダウンロードします。
curl -o .claude/skills/agent-browser/SKILL.md https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md
どう動くのか
agent-browserの核心は snapshot と refs の仕組みです。snapshot -i を実行すると、ページ上のインタラクティブな要素がrefsつきで返ってきます。以下は実行例です。
- link "Googleについて" [ref=e1]
- combobox "検索" [ref=e7]
- button "Google 検索" [ref=e10]
Claude Codeはこのrefsを使って要素を操作します。検索ボックスに入力するならこうです。
agent-browser fill @e7 "検索キーワード"
検索ボタンをクリックするならこうです。
agent-browser click @e10
CSSセレクタと違って、refsはスナップショットを取った時点で確定します。だからClaude Codeが「この要素で合ってるかな」と迷うことがありません。
気をつけること
いくつか注意点があります。
GoogleやDuckDuckGoなどの検索エンジンはCAPTCHAでボット検出されるため、agent-browserでは検索できません。Web検索が必要な場合はClaude CodeのWebSearchツールを使いましょう。
Chromiumのダウンロードが必要で、約160MBの容量を使います。また、Playwrightのバージョンによっては互換性のあるChromiumを別途インストールしないといけないことがあります。
デフォルトはヘッドレスモードで動きますが、--headed オプションをつけるとブラウザウィンドウを表示できます。デバッグするときに便利です。
