ゴールと前提

ゴール: 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