# AIエージェント向けに最適化されてたagent-browserをPlaywright MCPと比較検証してみた
agent-browserは、Vercel が開発したブラウザ自動化ツールです。AIエージェント向けに最適化されており、Rust製の高速なCLIとして実装されています。
開発者いわく、従来のブラウザ操作ツールであるPlaywright MCPと比較して最大93%のデータ量削減が可能です。本当にそこまで削減できるのか気になったので、実際に検証してみることにしました。
本記事では、Yahoo! JAPANのトップページを対象に、agent-browserとPlaywright MCPの両方を使ってデータ削減率とトークン消費量を比較します。
## 検証環境と方法
今回の検証では、Yahoo! JAPAN (https://www.yahoo.co.jp/) を対象に、以下の項目を確認します。
1. データ削減率の比較
2. Ref機能による操作の実用性
3. Claude Code使用時のトークン消費量
Yahoo! JAPANを選んだのは、日本の代表的なポータルサイトであり、リンクや動的コンテンツが豊富で複雑な構造を持つ実際のWebサイトだからです。実際にブラウザ操作を自動化する際は、複雑な構造を持つサイトが多いため、こういった現実的なケースでの性能把握が重要です。
## agent-browserの検証結果
まず、agent-browserをインストールします。
```bash
npm install -g agent-browser
agent-browser install
```
次に、Yahoo! JAPANのトップページを開きます。
```bash
$ agent-browser open https://www.yahoo.co.jp/
✓ Yahoo! JAPAN
https://www.yahoo.co.jp/
```
Snapshotを取得し、データ量を計測します。
```bash
$ agent-browser snapshot -i --json | wc -c
34481
```
agent-browserのSnapshotは約34KBでした。この軽量さにより、AIエージェントのコンテキストウィンドウを効率的に活用できます。
### Ref(参照ID)によるクリック動作の検証
agent-browserの特徴的な機能として、Refシステムがあります。これは、各要素に参照IDを付与して、そのIDを使って操作を行うしくみです。
スナップショットを取得すると、こんな感じで出力されます。
```bash
$ agent-browser snapshot -i | head -100
- link "AIアシスタント 「わかってるのにできない」って、なぜ起きる？" [ref=e1]
- link "ホームページに設定する" [ref=e2]
- link "Yahoo! BB" [ref=e3]
...
- link "中国軍 台湾近く沖合で上陸訓練か 739" [ref=e97]
- link "誰でも通園 先行の市で評価と不満 249" [ref=e98]
- link "タイ ガソリンスタンド爆発相次ぐ 149" [ref=e99]
- link "スノーモービルで事故か 70代死亡 NEW 27" [ref=e100]
```
各要素に `[ref=e1]` のようなIDが付与されています。今回はトップニュースの「中国軍台湾近く沖合で上陸訓練か」(Ref: e97)をクリックします。
agent-browserでは操作完了後、Doneと表示されるのが特徴です。AIエージェント向けに設計されており、操作が完了したことを明示的に示します。
```bash
$ agent-browser click @e97
✓ Done
```
遷移先のページで本文とURLを取得すると、正しく記事ページに移動しています。Ref機能は複雑なサイトでも正常に動作し、実用性は十分です。
```bash
$ agent-browser get text body | head -50
Yahoo!ニュース...
```
```bash
$ agent-browser get url
https://news.yahoo.co.jp/pickup/6565861
```
## Playwright MCPの検証結果
同様の検証をPlaywright MCPでも実施しました。同じYahoo! JAPANのトップページに対して、Playwright MCPのSnapshotを取得します。
```bash
# Playwright MCP経由でSnapshotを取得
$ # 実行結果: 136,725バイト
```
Playwright MCPのSnapshotは約137KBでした。Playwright MCPはアクセシビリティツリーベースの軽量データを、構造化されたYAML形式で保持します。Ref機能による操作も正常に動作し、実用性は十分です。
## 比較結果
同じYahoo! JAPANのトップページに対して、両ツールのSnapshotサイズを比較しました。
| ツール | Snapshotサイズ | トークン使用量 |
|--------|---------------|---------------|
| Playwright MCP | 136,725バイト (約137KB) | 67.17K (42%) |
| agent-browser | 34,481バイト (約34KB) | 43.8K (27%) |
| **削減率** | **約75%削減** | **約35%削減** |
agent-browserは、Playwright MCPと比較してSnapshotサイズを**約75%削減**しました。これは開発者の主張である「Up to 93% LESS context」には届きませんが、複雑なサイトでも大幅なデータ削減が実現できています。
トークン使用量もPlaywright MCPより少なく、LLMのコンテキストウィンドウを効率的に使えます。どちらも十分に実用的ですが、agent-browserはより軽量です。AIエージェントではより軽量なツールが求められるため、agent-browserは有力な選択肢です。
## まとめ
- Playwright MCPと比較して、Snapshotサイズを約75%削減、トークン使用量で約35%削減
- Ref機能による要素操作は実用性が高く、Yahoo! JAPANのような複雑なサイトでも正常に動作する
- AIエージェント向けに最適化されており、LLMのコンテキストウィンドウを効率的に活用できる
- Playwright MCPも十分実用的だが、より軽量なツールを求める時はagent-browserが有力な選択肢
## 参考
- [agent-browser公式リポジトリ](https://github.com/vercel-labs/agent-browser)
- [開発者のツイート](https://x.com/ctatedev/status/2010400005887082907)
## おまけ
Claude Codeで使用した、agent-browserとPlaywright MCP両方のトークンセッション内容をすべて記載します。興味がある方はご覧ください。
agent-browserのトークンセッション内容
```bash:claude-code
❯ /browsing-web @docs/designs/agent-browser-readme.md
は新しく作成されたブラウザツールの検証を行うためのREADMEです。Playwrightの実行前にagent-browserで検証を行ってください。
⏺ READMEファイルの内容を確認しました。agent-browserを使ってYahoo! JAPANのトップページでトークン削減効果の検証と操作テストを実施します。
まず、検証タスクの計画を立てます。
⏺ それでは、検証を開始します。まずagent-browserがインストールされているか確認します。
⏺ Bash(which agent-browser)
⎿/User/tmp/.nvm/versions/node/v22.19.0/bin/agent-browser
⏺ agent-browserがインストールされています。次にYahoo! JAPANのページを開きます。
⏺ Bash(agent-browser open https://www.yahoo.co.jp/) timeout: 30s
⎿✓ Yahoo! JAPAN
https://www.yahoo.co.jp/
⏺ Yahoo! JAPANのページが正常に開けました。次にRaw HTMLのサイズを計測します。
⏺ Bash(agent-browser get html body | wc -c) timeout: 30s
⎿227965
⏺ Raw HTMLのサイズは227,965バイトでした。次にSnapshotのサイズを計測します。
⏺ Bash(agent-browser snapshot -i --json | wc -c) timeout: 30s
⎿34481
⏺ Snapshotのサイズは34,481バイトでした。次に削減率を計算します。
⏺ 削減率を計算します。
- Raw HTML: 227,965バイト
- Snapshot: 34,481バイト
- 削減率: (227,965 - 34,481) / 227,965 × 100 = 84.87%
約85%のデータ削減が実現できています。次にインタラクティブスナップショットでRefを確認します。
⏺ Bash(agent-browser snapshot -i | head -100) timeout: 30s
⎿- link "AIアシスタント 「わかってるのにできない」って、なぜ起きる？" [ref=e1]
- link "ホームページに設定する" [ref=e2]
- link "Yahoo! BB" [ref=e3]
… +97 lines (ctrl+o to expand)
⏺ 良好です。ニュース記事のRefが確認できました。e97にある「中国軍 台湾近く沖合で上陸訓練か」の記事をクリックしてみます。
⏺ Bash(agent-browser click @e97) timeout: 30s
⎿✓ Done
⏺ クリックが成功しました。次に遷移先ページの本文を取得して確認します。
⏺ Bash(agent-browser get text body | head -50) timeout: 30s
⎿ Yahoo!ニュース 