AI活用全般

agent-browser + wterm + opencodeとは|Claude CodeでAIがAIを見守る3点入れ子構造とPlaywright MCPの違い

この記事の結論

agent-browserはVercel Labsが公開したAIエージェント向けブラウザ操作ツール。

GitHubスター29,800・週500,000ダウンロードを記録しています。

wtermはブラウザ内で動くターミナル描画ライブラリ。

Zigコア12KBで、Claude Codeなどから呼び出して使えます。

この2つとopencodeを組み合わせた「3点セット入れ子構造」が話題。

Playwright MCPとの違いも公式ソースで整理しました。

この記事はClaude CodeなどのAIエージェントでブラウザ操作を自動化したい開発者向け(CLIの基本が分かれば読めます)。

agent-browserとwtermって結局なに?

まずagent-browserから見ていきます。

Vercel Labsが公開したブラウザ操作CLIで、Claude CodeやCursorなどのAIエージェントから呼び出す前提で設計されています。

開発者本人が2026年1月11日に公開した紹介ポストにはこう書かれています。

Weekend project: agent-browser. Browser automation CLI for agents → Zero config → Fast Rust CLI → Headed or Headless → Up to 93% less context than Playwright MCP → Compatible with Codex, Claude Code, Gemini, Cursor, Copilot, opencode, and any agent that supports Bash

(出典: agent-browser.dev、開発者本人発表)

公開から1ヶ月で週次ダウンロードが500,000を突破。

GitHubスターは29,800を記録しています。

これは相当な伸び。

私が気になったのは、汎用のブラウザ自動化ツールではなくAIエージェント専用に設計されている点です。

一方のwtermは「web terminal」の略で、ブラウザ上で動くターミナル描画ライブラリ。

公式サイトが挙げている特徴はこれです。

A terminal emulator for the web → DOM rendering — not canvas → Select text, copy/paste, ⌘+F, a11y → Dirty-row tracking, 24-bit color, themes → WebSocket transport with reconnection → Zig core compiled to ~12 KB WASM → just-bash, local, SSH(出典: wterm.dev

CanvasではなくDOMで描画している点がポイント。

テキスト選択やコピペ、⌘+F検索、アクセシビリティ機能が標準で使えます。

Zigで書かれたコアを約12KBのWASMに圧縮しているのも異常な軽さです。

Playwright MCPと何がそんなに違うの?

agent-browserの最大の売りはコンテキスト効率です。

ただ数字の扱いには注意が必要で、「最大93%削減」という留保付きの表現が正確。

公式サイトにはこう明示されています。

snapshot出力: 約200〜400トークン/フルDOM表現: 約3,000〜5,000トークン(出典: agent-browser.dev

実測検証もいくつか出ています。

一方でmorphllm.com(2026年3月8日)の20ステップ複雑ワークフロー検証では、Playwright MCPのほうが2.0〜3.2倍効率的だったという真逆の報告もあります。

Playwright MCP should remain the default for complex CRUD and coding agent workflows.(出典: morphllm.com

ここが面白いところ。

93%削減は-i(対話要素のみ)-c(空構造削除)-d(深さ制限)という出力絞り込みスイッチを組み合わせて初めて達成される数字で、常に出るわけではありません。

視覚的なレイアウト判断には別途画像分析が必要なケースもあります。

両者の立ち位置を表に整理します。

観点agent-browserPlaywright MCP
設計思想AIエージェント向けCLI(Bashから呼ぶ)MCPサーバ経由でツール呼び出し
コンテキスト効率(単純UI)snapshot 200〜400トークンフルDOM 3,000〜5,000トークン
コンテキスト効率(複雑タスク)morphllm実測では劣後あり20ステップCRUDで優位との報告
言語100% Rust(v0.20.0以降)Node.js/TypeScript
デーモンメモリ約8MB(v0.20.0以降)Node.js依存で大きめ
対応エージェントBash対応の全エージェント(Claude Code/Cursor/Gemini/Codex/opencode等)MCP対応クライアント
推奨用途(外部レビュー)日常的なブラウザ自動化複雑CRUD・長尺ワークフロー

私は「agent-browserが全面的に勝ち」という整理ではなく「用途で選ぶべきもの」という読みのほうがフェアだと思っています。

実際、webfuse.com(2026年4月10日)もこう書いています。

Playwright remains the strongest default for most engineering teams.(出典: webfuse.com

どんな3点セット構成で話題になっているの?

ここが本記事で一番書きたかったところ。

agent-browserの開発者が示唆している構図は、agent-browser単体ではなく3点セット入れ子構造です。

図にするとこうなります。

3点セット入れ子構造
┌─ Claude Code(外側のAI・指示する側)
├─ wterm(ブラウザ内ターミナル・AIの操作画面)
└─ opencode(内側のAI・wterm上で動くエージェント)
└─ agent-browser(Claude Codeが外部ブラウザを操作するCLI)

構図の要点は3つ。

  • Claude Codeが外側で全体を見張る
  • wtermで描画されたターミナルの中でopencodeが別のAIとして動く
  • agent-browserで外部ブラウザの操作結果を両方のAIに見せる

つまりAIがAIを見守る構造です。

opencodeはSST(Serverless Stack)チーム製のターミナルエージェントCLI。

GitHubリポジトリのスターは146,000(2026年4月19日時点)で、75以上のモデルプロバイダに対応しています。

Claude、OpenAI、Gemini、Bedrock、Groq、Mistral、Ollamaまで1つのCLIから叩ける柔軟さが評価されている印象。

agent-browserの公式「対応エージェント」リストにopencodeが含まれており、wtermも「just-bash, local, SSH」の3形態で動く設計です。

この組み合わせは技術的に成立する構成として整理できます。

日本語解説が薄い領域なのは確か。

私の見方では、ここが今後1〜2ヶ月で日本語技術ブログの主戦場になるエリアです。

料金と環境はどれくらい必要?

3ツールとも本体は無料です。

内訳を表に整理します。

項目agent-browserwtermopencode
ライセンスApache-2.0Apache-2.0MIT
本体料金無料無料無料
実運用コストAIのAPIトークン代のみなし(ライブラリ)AIのAPIトークン代のみ
インストールnpm / Homebrew / Cargonpm(@wterm/core等)CLIバイナリ
依存Chrome for Testing自動DLブラウザ/NodeGo製TUI
最新バージョンv0.26.0(2026-04-16)継続更新v1.14.18(2026-04-19)

運用費で効いてくるのはAIのAPIトークン代だけ、と公式は案内しています。

agent-browserの公式changelogによれば、v0.20.0以降はNode.js依存を完全除去してネイティブ実行ファイル化。

コールドスタートが1002ms→617ms、デーモンメモリが143MB→8MB、インストールサイズが710MB→7MBと激減しています。

この数字はさすがに強い。

18倍減、99倍減の桁が並ぶとインパクトがあります。

v0.26.0ではdoctorコマンド(環境診断・自動修復)と安定タブID(t1, t2)が追加されました。

opencodeについては運用上の注意点が1つあります。

sst/opencodeリポジトリはAnthropicから2026年1月9日に法的要求を受け、Consumer OAuthトークン経由のClaude利用はブロック済み。

APIキー直打ち運用は継続可能、とアナウンスされています。

Claude ProやMaxプランのアカウント連携で使おうとしている場合は、API契約が別途必要です。

どんな場面で効きそうか?

個人開発者・副業エンジニア目線で整理します。

Playwright MCPを既に使っている人から見ると、agent-browserの旨みはトークン代の削減と起動の速さ。

ここが効くユースケースを挙げます。

ケース1: 朝イチの管理画面チェック自動化

WordPressやShopifyの管理画面をClaude Codeに見張らせるタスク。

毎朝1回スナップショットを取ってレポート化する運用なら、snapshot 200〜400トークン×複数ページでも消費量は軽めです。

Playwright MCPでフルDOMを毎回読ませると、APIコストが厚くなる構造です。

ケース2: 副業サービスの回帰テスト

ランディングページのフォーム送信、決済フローの見た目確認、レスポンスの取得。

agent-browserのbatchコマンドで複数操作をJSONパイプで流せるので、Claude Codeが自動でコマンドを組み立てて実行する流れが作れます。

ケース3: AIエージェントのデモ環境

wterm + opencodeで「ブラウザ上でAIが動くデモ」を作るパターン。

Zigコア12KBのおかげでCDN配信も軽く、静的ファイル配信不要(WASMはbase64でJSバンドルにインライン化)。

個人の技術ブログや副業サービスのランディングページにデモを埋め込むなら、この軽さは武器になります。

ケース4: 複雑ワークフローは従来通り

morphllm.comの実測で示された「20ステップ以上のCRUD処理」ではPlaywright MCPのほうが効率的なので、こちらは従来通り。

agent-browserに全移行ではなく、用途で使い分けるスタンスが今のところ無難です。

安全設定で気をつける点はある?

ここは公式情報を読んでおきたい箇所です。

agent-browserは本質的に「LLMが限られたコンテキストでWeb UIを読むための中間表現レイヤー」として設計されています。

汎用のブラウザ自動化ツールとは違い、安全制御を意識した使い方が必要です。

具体的には、ドメイン許可リストとアクション確認ポリシーがデフォルトでオフになっています。

本番環境で寝かせ運用するなら、configファイルで明示的に有効化が必要です。

セッションCookieやlocalStorageはAES-256-GCMで暗号化されますが、それは保存時の話。

操作範囲を絞る設定は別に必要です。

もう1つ実装側の罠として、SPA(シングルページアプリ)特有の挙動があります。

DOMが「保存完了」と表示していてもネットワークリクエストがまだ終わっていない、というケースです。

Hacker NewsのHN議論スレッドでも実装上の懸念が議論されています。

私ならここを読んだ時点で、本番投入前にテスト環境で最低1週間は挙動を眺める運用にします。

よくある疑問

Q. agent-browserはPlaywrightの完全上位互換ですか?

いいえ。

webfuse.comやmorphllm.comの比較記事では、20ステップ以上の複雑なCRUDワークフローではPlaywright MCPのほうが効率的という実測が示されています。

agent-browserは日常的なブラウザ操作と、トークン効率が効く中短尺のタスク向け。

複雑なワークフローはPlaywrightで補完する整理が現状の主流です。

Q. 93%削減というのは誰の数字ですか?

agent-browser開発者本人による2026年1月11日のXポスト「Up to 93% less context than Playwright MCP」が一次ソースで、現在は公式サイトagent-browser.devにも掲載されています。

「Up to」(最大)という留保付き。

morphllm.comの20ステップ実測ではPlaywright MCPのほうが優位という結果もあるため、ページ複雑度に依存する数字です。

Q. Claude Codeと連携させるのにMCPサーバーは必要ですか?

不要です。

agent-browserはCLIツールでBashから呼び出す設計なので、Claude Codeに限らずCursor、GitHub Copilot、Codex、Gemini、opencodeなど「Bashを叩けるエージェント全部」が対象。

MCP未対応のエージェントでも動きます。

Q. wtermとagent-browserはセットで使う必要がありますか?

いいえ、独立したツールです。

wtermはブラウザ上のターミナル描画ライブラリで、agent-browserは外部ブラウザの操作CLI。

組み合わせデモも公開されていますが、単体運用も普通に可能です。

Q. 料金はどれくらいかかりますか?

agent-browser、wterm、opencodeの3ツールは本体無料(Apache-2.0またはMIT)。

実運用でかかるのはAIのAPIトークン代だけです。

Claude APIを使うならAnthropicの従量課金、OpenAIやGeminiを使うなら各社の料金体系が適用されます。

Q. opencodeとAnthropicの関係で注意点は?

sst/opencodeは2026年1月9日にAnthropicから法的要求を受け、Consumer OAuthトークン経由のClaude利用はブロックされました。

APIキー直打ちなら継続利用可能です。

Claude Pro/Maxのサブスクを流用する運用は不可なので、API契約が必要です。

まとめ

ここまで整理した論点を3つに絞ります。

  • agent-browser+wterm+opencodeは「AIがAIを見守る」3点入れ子構造を成立させる新興OSS。週500,000DL到達・GitHubスター29,800が示す通り勢いは本物
  • 「最大93%コンテキスト削減」はケース依存。単純ページでは大幅削減の実測があるが、複雑CRUDではPlaywright MCPに軍配。用途で使い分けるのが今のところ妥当
  • 安全設定はデフォルトオフ。本番運用するならドメイン許可リストとアクション確認ポリシーを明示設定すること

個人開発者にとって「毎朝の管理画面チェック」「副業サービスの画面回帰テスト」「ブログやLPへのAIデモ埋め込み」はフィットしやすい領域。

ここは抑えておきたい組み合わせです。

日本語での3点入れ子構造解説はまだ薄いので、公式アップデートを引き続きウォッチしていく予定です。

このページに出てきた言葉

CLI
黒い画面に文字でコマンドを打って動かすツールの総称
AIエージェント
AIに指示するだけで調べ物や画面操作を自動でこなす仕組み
WASM
ブラウザ内で動く高速な実行ファイル形式
DOM
Webページの内部構造。要素の位置関係を持つ木構造
Canvas
ブラウザ上に絵として描画する領域。文字も絵扱いになる
MCP
AIアプリと外部ツールをつなぐプロトコル規格
トークン
AIが文章を処理する最小単位。APIの料金単位でもある
コンテキスト
AIが一度に読み込める情報量の上限
CRUD
作る・読む・更新・消すというWebアプリの基本操作
SPA
JavaScriptで画面を書き換える方式のWebアプリ
OAuth
あるサービスのアカウントで別サービスにログインする仕組み
デーモン
裏で動き続けるプログラム

参考リンク

この記事を書いた人

Aisola Lab運営者 aisola のアイコン

aisola

Aisola Lab 運営者

AIツールを使ったコンテンツ制作・リサーチ・WordPress運用を日常的にやっています。自分で動かせるものは実際に触って書き、触っていないものは公式ドキュメントと一次情報をもとに書き分けています。

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。

-AI活用全般
-, , , ,

← 戻る