Claude Code のデスクトップ版に、ついに内蔵ブラウザが入りました。Cmd+Shift+B で外部サイトやステージング URL、API ドキュメントをその場で開ける、あの機能です。
私は先週末、Astro で作った個人サイトのリファクタ作業でこれを試してみました。正直、最初は「MCP でブラウザ操作は前からできたじゃん」と半信半疑だったんです。でも触って2時間くらいで考えが変わりました。あれは別物です。
この記事では、2026年7月10日にアナウンスされた Claude Code 内蔵ブラウザの実務での使い方を、私が実際に踏んだつまずきポイントも含めて共有します。
結論:Claude Code 内蔵ブラウザは「開発ループを閉じる」ための機能
先に結論から書きます。この機能の価値は「AI がブラウザを見られるようになった」ことではなく、ローカル開発サーバー・ステージング・本番の三点を一つのセッション内で往復できることにあります。
これまでは Claude Code がコードを書いても、UI 確認は自分で Chrome を開いてスクショを取って貼り付ける、という手順が挟まっていました。この往復が消えます。
しかも Anthropic 公式の説明によれば、Claude Code のデスクトップ版は元々ターミナル・デスクトップアプリ・ブラウザ・IDE と複数のサーフェスに広がっており、その中でデスクトップアプリが「ブラウザを内包する」方向に進化した形です。ライバルの OpenAI が同時期にブラウザツールを縮小したというニュースもある中で、Anthropic は逆張りで統合を進めています。
セットアップは3分で終わる:バージョン確認と起動手順
手順は拍子抜けするほど短いです。
1. デスクトップアプリを最新に上げる
必要バージョンは 1.2581.0 以降。私が試した時点では自動更新で降ってきていました。ターミナル版ではなく、必ずデスクトップアプリ側を使ってください。ブラウザは Electron のシェル内でサンドボックス化された別プロセスとして立ち上がる仕組みなので、素の terminal からは呼び出せません。
claude --version
# 2.1.208 以上ならデスクトップアプリも新しい2. Cmd+Shift+B で起動
セッション中に Cmd+Shift+B(Windows/Linux は Ctrl+Shift+B)を押すと、右ペインにブラウザが開きます。URL を入力するか、Claude 自身に「https://… を開いて」と頼めば OK です。
3. 必要なら設定で許可ドメインを絞る
私はこれを最初にやりました。うっかり本番管理画面を開いて Cookie が漏れるのが怖かったので、.claude/settings.json に許可ドメインを書いています。
{
"browser": {
"allowedDomains": [
"localhost",
"*.vercel.app",
"docs.astro.build",
"github.com"
]
}
}これは公式ドキュメントで推奨されている設定ではなく、私が念のため入れているものです。サンドボックスされているとはいえ、Chrome の Cookie が引き継がれるわけではないので理論上は安全ですが、心理的な保険として。
私が実際に使った3つのワークフロー
ここからは具体例です。総論より、動く事例のほうが刺さるはずなので。
ワークフロー1:外部 API ドキュメントを見ながらコードを書く
地味に一番効きました。
Stripe や Anthropic 自身のドキュメントを Claude Code に読ませたいとき、これまでは URL を渡して WebFetch させるか、MDX をコピペするしかなかったんですよね。内蔵ブラウザだと、Claude 側が「今このページを見ています」という状態を持ったままコードを書けます。
実際、私は Files API のエンドポイント仕様を右ペインで開きつつ、左ペインで Python のクライアントを書かせました。「そこに書いてある expires_at の型に合わせて」みたいな指示が通ります。コピペの往復がゼロになる、これが想像以上に集中を切らさない。
ワークフロー2:ローカル dev サーバー → ステージングの差分確認
Astro サイトを触っていたとき、npm run dev した localhost:4321 と、Vercel のプレビュー URL を並べて比較させました。
> localhost:4321/blog と https://xxx-preview.vercel.app/blog を
> 開いて、レイアウトの違いをスクショで比較してClaude Code はブラウザ内で両方を開き、DOM を読み取ってから「フッターのマージンが 16px ずれています」と返してきました。目 grep より速いです。ただし DOM ベースの比較なので、フォントレンダリングの微差までは拾えません。ピクセル diff が必要なら Playwright を別で回すほうが確実です。
ワークフロー3:本番スモークテストをセッション終端で走らせる
これは慎重に使っています。デプロイ直後に、Claude Code に本番 URL を開かせて、決められたページ遷移だけをやらせる。SSO のセッションが漏れないよう、サンドボックスであることが前提です。
私の場合はログイン不要の公開ページだけを対象にしていて、認証が絡む画面は絶対に踏ませないようにしています。ここは自分ルールとして固く決めておいたほうがいい。事故ってから後悔するより。
ハマった落とし穴3つ:これは事前に知っておきたい
落とし穴1:ブラウザ操作がトークンを想像以上に食う
1ページ開くたびに DOM のテキストがコンテキストに乗ります。長い記事や SPA を何枚も開くと、あっという間に数万トークン飛びました。
対策としては、必要な部分だけを Claude に「この h2 の下だけ読んで」と指示するか、Context Editing (clear_tool_uses_20250919) で古いブラウザ tool 呼び出しを掃除する。私は後者を採用しています。長時間セッションでは必須です。
落とし穴2:ログイン状態は毎回リセットされる
サンドボックスなので、セッションをまたぐと Cookie が消えます。これは仕様であり、セキュリティ上正しい挙動なんですが、開発中は面倒。同じセッション内で作業を完結させる意識が要ります。
落とし穴3:permission mode との相性
Auto Mode で走らせているとき、ブラウザからのフォーム送信は Sonnet 4.6 の classifier が「書き込み系」と判定してブロックすることがあります。これは正しい挙動ですが、意図的に POST させたいときは PreToolUse hook で例外を切ってやる必要があります。
私は .claude/settings.json にこう書いています。
{
"hooks": {
"PreToolUse": [
{
"matcher": "browser_navigate",
"command": "echo 'browser action logged' >> ~/.claude/browser.log"
}
]
}
}ログを取るだけの hook ですが、後から「あのとき Claude はどのページを踏んだんだっけ?」を追えるので、監査代わりになります。
MCP のブラウザサーバーとどう使い分けるか
気になる人が多いはずなので触れておきます。Playwright MCP や Browserbase を既に使っている人からすると、この機能はかぶって見えるかもしれません。
私の使い分けは、インタラクティブな開発中は内蔵ブラウザ、CI や無人ジョブは MCP です。
内蔵ブラウザは「今このセッションで自分が見ている画面を Claude と共有する」ためのもの。一方 MCP 経由のブラウザは headless で回すのに向いていて、テストランナー的な用途に強い。両者は競合ではなく、レイヤーが違います。
そもそも内蔵ブラウザはデスクトップアプリのシェル内で動くので、CI 環境では起動しません。ここは物理的に住み分けが決まっている感じです。
まとめ:今日からやる4つのアクション
長くなったので、実行リストにまとめます。
- デスクトップアプリを 1.2581.0 以上に更新する。ターミナル版だけでは使えません
- Cmd+Shift+B を一度押してみる。触ればわかります、5分でいい
.claude/settings.jsonに許可ドメインを書く。心理的な保険として- Context Editing を併用する。ブラウザで長時間作業するなら、トークン管理は必須
私自身、この機能が入ってから Claude Code のセッションが1回あたり平均で30分ほど長くなりました。それだけ「一つのセッションで完結できることが増えた」という意味です。コピペ地獄から解放されたい人ほど、まず触ってみてほしい機能です。
次に試したいのは、この内蔵ブラウザと Skills を組み合わせて「特定サイトの読み方を SKILL.md に固定化する」パターン。うまくいったらまた書きます。
参考リンク
- Claude Code changelog — バージョン 2.1.208 以降の変更点
- Explainx: Claude Code desktop browser built-in July 2026 — 2026年7月10日発表の内蔵ブラウザ機能の解説
- Emerging AI: Claude Changed - The July 2026 Way to Use it — Claude のサーフェス統合の背景
- Prompt caching - Claude Platform Docs — キャッシュとトークン管理の公式仕様