ブラウザCLI：AIコーディングエージェント向けのトークン効率の良いブラウザ自動化ツール

Browser CLIの機能

Browser CLIは、AIコーディングエージェントにおけるトークンオーバーヘッドに対処するために構築されたブラウザ自動化ツールです。開発者は、Playwright MCPプロトコルのオーバーヘッドにより、ブラウザ検証がセッションごとに約30,000トークンを消費していることに気づきました。各browser_navigate + browser_snapshotコールは、JSONスキーマフレーミングで約1,500トークンのコストがかかっていました。

解決策は、Bashコマンドを介して操作する永続的なヘッドレスChromiumデーモンです。内部では同じPlaywright ARIAスナップショット技術を使用していますが、約1,500トークンではなく、コールあたり約50〜100トークンで実現します。

コマンドと使用方法

利用可能なコマンドには以下が含まれます：

• browser-cli goto https://example.com - URLに移動
• browser-cli snapshot -i - @e参照付きARIAツリー
• browser-cli click @e3 - 参照によるクリック
• browser-cli fill @e5 "hello" - 入力フィールドへの入力
• browser-cli css @e3 font-size - 計算済みCSS値の取得
• browser-cli inspect @e3 - 完全なボックスモデル＋スタイル
• browser-cli screenshot /tmp/page.png - スクリーンショット
• browser-cli snapshot -D - 差分：前回のスナップショットからの変更点
• browser-cli responsive /tmp - モバイル/タブレット/デスクトップでのスクリーンショット

サーバーは最初のコールで自動起動し（約3秒）、その後はコールあたり約100〜200msで応答します。30分間生存し、コマンド間でクッキー、タブ、状態を保持します。

トークン節約効果

トークン比較：

• Playwright MCP：コールあたり約1,500トークン、20コールで約30,000トークン
• Browser CLI：コールあたり約75トークン、20コールで約1,500トークン

これはブラウザ検証で95%の節約となります。セッションごとに複数のタスクを実行する自動化パイプラインでは、この効果が急速に累積します。

Playwright MCPを超える機能

• CSS検査 - css @e3 paddingは計算済み値を返します。inspect @e3は完全なボックスモデル＋16の主要スタイルをJSONで提供します。
• ライブスタイル変更 - style @e3 color redとstyle --undo。ソースコードに触れずにCSSをデバッグ。
• スナップショット差分比較 - snapshot -Dは前後のARIAツリーを比較します。
• レスポンシブプリセット - responsive /tmpはモバイル、タブレット、デスクトップのスクリーンショットを1コマンドで撮影します。
• 認証プロファイル - handoffは手動SSO/MFAログイン用に可視Chromeを開き、resumeでヘッドレスに戻ります。auth-save adminはセッションを暗号化（AES-256）。次回はgoto-auth https://app.com/dashboard --profile adminでログイン不要。
• コマンドバッチ処理 - chain [["goto","url"],["snapshot","-i"],["console"]]は複数コマンドを1コールで実行します。

技術的実装

アーキテクチャ：AIエージェント → Bash → CLIクライアント（bin/browse.mjs） → HTTP POST（localhost） → サーバー（src/server.mjs） → Playwright API → Chromium（ヘッドレス）。

純粋なNode.js。Playwrightが唯一の依存関係。Bun、Rust、MCPオーバーヘッドなし。

Claude Code統合

グローバルインストール：

npm install -g @tuandm/browser-cli

.claude/settings.jsonに追加：

{
  "permissions": {
    "allow": ["Bash(browser-cli*)"]
  }
}

.claude/rules/browser-cli.mdにルールを追加し、ClaudeにPlaywright MCPの代わりにBrowser CLIを使用するよう指示。開発者は5つの評価シナリオを実行し、ルールが読み込まれるとClaudeは毎回正しいコマンドを選択しました。

将来のマーケットプレイス配布用に、Claude Codeプラグイン（plugin.json付属）としても提供されています。

インスピレーションと技術

Garry Tanのgstackに触発されました。これはAIエージェント向けの永続的Chromium CLIアプローチを開拓しました。中核的な洞察は、ブラウザ自動化においてBashコマンドがMCPよりも劇的にトークン効率が良いことでした。基盤技術はMicrosoftのPlaywrightです。