ブログサイトのロゴsui Tech Blog

2026/01/12

AIエージェント向けに最適化されてたagents-browserをPlaywright MCPと比較検証してみた

Playwright MCPと比較してデータ量を最大75%削減。Yahoo! JAPANでの検証結果を公開

AIエージェント開発の課題

ブラウザ操作自動化において開発者が直面するデータとコストの壁

データ量の肥大化

複雑なDOM構造

現代のWebサイトは構造が複雑でHTMLデータが膨大になりがち

トークン消費の増大

コストと制限

不要な情報が多いとLLMのコンテキストを圧迫しコストが増加する

操作精度の低下

ノイズによる混乱

情報過多によりAIが重要な操作要素を見落とすリスクがある

検証環境とRef機能

日本の代表的なポータルサイトYahoo! JAPANを対象に検証を実施

検証対象サイト

リンクや動的コンテンツが豊富で複雑な構造を持つ実際のWebサイト

Yahoo! JAPAN

トップページを対象にデータ量と操作性を確認

トップニュース

特定のニュース記事へのクリック遷移をテスト

Ref(参照ID)機能

要素に短いIDを付与してAIが認識しやすくする仕組み

ID付与

各リンクに[ref=e1]のような短いIDが割り当てられる

操作コマンド

click @e97のようにIDを指定して正確に操作可能

Snapshotサイズ比較

同一ページにおける取得データサイズ(バイト数)の比較結果

Playwright MCP

137
KB

構造化されたYAML形式だが容量は大きめ

agents-browser

34
KB

圧倒的な軽さを実現

検証結果のインパクト

agents-browser導入によるリソース削減率(対Playwright比)

データサイズ

75
%削減

通信量と処理時間を大幅に短縮

トークン消費

35
%削減

LLMのコンテキスト効率を改善

CORE MESSAGE

検証の結論

agents-browserは圧倒的に軽量で実用的。複雑なDOM構造を持つサイトでもRef機能により正確に操作可能

Playwright MCP

詳細な情報保持に優れるがデータ量が大きくコストがかさむ

agents-browser

必要十分な情報に絞り込み高速かつ低コストで運用可能

Next Actions

次のステップ

より軽量で高速なAIエージェントを開発するために

導入ステップ

インストール

npm install -g agent-browserで今すぐ試せます

比較検証

開発中のエージェントでデータ削減効果を確認しましょう

ポイント: コンテキストウィンドウを節約し、より複雑な推論にリソースを回そう

軽量なブラウザ操作でAIとの対話を最適化

sui Tech Blog