WSL2 の Claude Code から Browser Use CLI 2.0 で、ホスト側のブラウザに CDP 接続で操作する

ブラウザ操作ツール「Browser Use」から CLI 2.0 がリリースされました。
https://x.com/browser_use/status/2035081807209931153

AI エージェントからのブラウザ操作と言えば、Playwright MCP とかがありましたが、いよいよ CLI だけで済むようになったということですね。

Claude Code から「●●を開いて」「スクショ撮って」といった操作ができるところまで、手順を残しておきます（もはや自分のため）

ゴールと前提

ゴール: Claude Code から「●●を開いて」「スクショ撮って」を行える

• Claude Code と Browser Use CLI は WSL2 上で動作
• ブラウザはホスト(Windows)側で動作
• Claude Code --(Bash)--> Browser Use CLI --(CDP)--> ブラウザという経路

前提:

• WSL2 上で Claude Code が動く環境があること
• uv と npx が動く環境があること
  • おすすめは mise-en-place 経由で uv と node をインストールですかね。Claude Code も mise で入れられます。

注意点:

Browser Use CLI(というか WSL2)とホスト側のブラウザ間の IP 通信は WSL2 のミラーモードネットワークを使います。なので Windows 11 22H2 以降が必須です。でない場合は、WSL2 とブラウザ間の通信をなんとか確保してください（ミラーモードじゃなくても IP 通信さえできればなんとかなるけど、そこは調べてくださいな）。

手順

全体の流れ:

• WSL2 のミラーモードネットワークを有効化
• Browser Use CLI をインストール
• Claude Code プロジェクトに SKILL.md を配置
• Chromium ベースブラウザを --remote-debugging-port 付きで起動
• Claude Code から使う

以下、要点だけ（詳細は調べて）

WSL2 のミラーモードネットワークを有効化

ホスト側(Windows) 側での操作:

.wslconfig

[wsl2]
networkingMode=mirrored

WSL2 再起動

wsl --shutdown

Browser Use CLI をインストール

WSL2 側(例えば Ubuntu)での操作:

One-Line Install (Recommended)に従うのが一番確実です。

ちなみに: インストール先は以下二つのディレクトリと ~/.(ba|z)shrc の編集です

• ~/.browser-use-env/
• ~/.browser-use/

アンインストールはこれらの削除と、~/.(ba|z)shrc に加えられた PATH 部分の削除です。

Claude Code プロジェクトに SKILL.md を配置

この作業は、Claude Code プロジェクト(= 作業ディレクトリ) 毎に行います

cd CLAUDE_CODE_PROJECT/
npx skills add https://github.com/browser-use/browser-use --skill browser-use

参考までに npx skills add ... では以下のように聞かれます。

◆  Installation scope
│  ● Project (Install in current directory (committed with your project))
│  ○ Global
◆  Installation method
│  ● Symlink (Recommended) (Single source of truth, easy updates)
│  ○ Copy to all agents

npx を使わず SKILL.md を配置する

npx は実のところ この SKILL.md を .agents/skills/browser-use/ と .claude/skills/browser-use/ に置いてるだけです。
そのため、以下のように curl で直接ダウンロードしても同じです。

cd CLAUDE_CODE_PROJECT/
mkdir -p .claude/skills/browser-use/
curl -fsSL https://raw.githubusercontent.com/browser-use/browser-use/refs/heads/main/skills/browser-use/SKILL.md > .claude/skills/browser-use/SKILL.md
mkdir -p .agents/skills/browser-use/
curl -fsSL https://raw.githubusercontent.com/browser-use/browser-use/refs/heads/main/skills/browser-use/SKILL.md > .agents/skills/browser-use/SKILL.md

Chromium ベースブラウザを --remote-debugging-port 付きで起動

例として MSEdge を対象にします。
--remote-debugging-port=9222 をつけて起動するのがポイントです。また、既存環境を壊さないとか認証情報とか気になるので --user-data-dir で別環境を作るのを強くお勧めします。

cmd.exe なら

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --remote-debugging-port=9222 --user-data-dir=%USERPROFILE%\edge-cdp-profile

PowerShell なら

Start-Process msedge -ArgumentList "--remote-debugging-port=9222", "--user-data-dir=$env:USERPROFILE\edge-cdp-profile"

ショートカットアイコンを作りたければ、cmd.exe のコマンドラインをリンク先に書きましょう
※ %USERPROFILE% が動かないかもしれないから、書き換える(未確認)

立ち上げたら WSL2 側から接続を確認しましょう

WSL2 側

$ curl localhost:9222/json/version
{
   "Browser": "Edg/146.0.3856.62",
   "Protocol-Version": "1.3",
   "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.0.0",
   "V8-Version": "14.6.22.7",
   "WebKit-Version": "537.36 (@f2c63c965af6e83261f6df9c431217c8dbb3573e)",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/b0886606-d5eb-4633-bd4e-541a37f2f68c"
}

Claude Code から使う

Claude Code よりも先にブラウザを立ち上げておきましょう。

以上のように Claude Code から

• ●●を開いて
• スクリーンショットを撮って、デスクトップへ保存して
• ページの記事一覧の先頭は何？

といった指示ができるようになります。

ブラウザを閉じても、なんどもなんども立ち上がってくる！

ブラウザの閉じるボタンを押しても、何度も何度も立ち上がってきて「ブラクラかよ！」って思うこともありますが、これは browser-use のアーキテクチャーのせいです。

まず対処は browser-use close を実行することです

• Claude Code で「ブラウザを閉じて」等の指示をする (と実行される)
• 別ターミナルから browser-use close を実行する
  このコマンド実行時にはブラウザは閉じません(後述)が、これで、ブラウザの閉じるボタンを押したら閉じます。

browser-use は初回起動時に常駐します。このプロセスがブラウザと CDP 通信するんですが、ブラウザが不用意な操作で閉じられちゃってもリスポーン(復活)するようになってるらしいです。
browser-use close はこのリスポーン終了をするコマンドのようです。
（全体的に未確認だけど、ほぼ合ってると思う）

あとがき

MCPさんェ...

End_Of_Text