Claude Desktop のブラウザ機能を試してみる

はじめに

こんにちは、クラスメソッド製造ビジネステクノロジー部の嶋田です。

Claude Code に最近ブラウザ機能が加わったので、フロントエンド開発で使えるようにセットアップし、実際に動かすところまで試しました。

普段の業務でフロントエンドを触るので、コードを直したあとブラウザで確かめる往復をエージェントに任せられるかを知りたかったのが動機です。

本記事では、Claude Desktop アプリの導入（環境構築ツール mise への登録を含む）から、内蔵ブラウザを使った修正と検証の一連までを、チュートリアル形式でたどります。最後に Cursor と ChatGPT アプリの近い機能との違いも整理します。

なお、この機能は登場したばかりです。本記事は Claude Desktop アプリと Claude Code v2.1.206 前後で確認していますが、今後のアップデートで挙動やショートカットが変わる可能性があります。

Claude Code の「ブラウザ機能」は 2 種類ある

先に区別しておきます。名前が似ていて混同しやすいのですが、Claude Code のブラウザ機能は別々の 2 つを指します。

1 つは Desktop アプリの内蔵ブラウザです。Claude Desktop アプリの Code タブの中に、サンドボックス化されたブラウザのペインが開きます。2026 年 7 月 6 日から 10 日の週（v2.1.202 から v2.1.206、Week 28 のリリースノート）で追加されました。Claude がドキュメントやデザイン、任意のサイトを開いて、内容を読み、クリックや入力で操作します。セッションを永続させるかどうかを選べ、外部サイトへの操作は安全性の分類器がレビューします。この内蔵ブラウザは Desktop アプリ限定です。

もう 1 つは Claude in Chrome です。Chrome 拡張（v1.0.36 以上）を介して、手元の実際の Chrome を操作します（公式ドキュメント）。CLI と VS Code 拡張の両方で使え、ブラウザのログイン状態を共有します。起動時に --chrome を付けるか、/chrome で有効化します。ログイン済みの Web アプリや localhost の開発サーバをそのまま操作できるのが特徴です。

前者はアプリに閉じた安全なブラウザ、後者は手元の Chrome をそのまま動かす仕組みだと考えると分けやすいです。本記事では前者を触ります。

セットアップ

Desktop アプリを mise に入れる

私は環境構築を mise の bootstrap に寄せているので、Claude Desktop アプリもそこに登録します。

私の mise.toml にはすでに brew-cask:claude-code がありましたが、これはターミナル用の CLI です。内蔵ブラウザを持つ Desktop アプリはこれとは別物で、cask のトークンは claude です。

[bootstrap.packages] の cask ブロックに 1 行足します。

"brew-cask:claude" = "latest"       # Claude Desktop アプリ（内蔵ブラウザを持つ）
"brew-cask:claude-code" = "latest"  # 既存。ターミナル用の CLI

mise bootstrap -n で Dry run すると、期待どおり別々のパッケージに解決されました。

$ mise bootstrap -n
install cask claude/1.24012.1,0adcaed55041a881be363f2c4a4729f67a8b27d7
link app /Applications/Claude.app
install cask claude-code/2.1.206
link binary $HOMEBREW_PREFIX/bin/claude

claude は /Applications/Claude.app として、claude-code は claude バイナリとしてリンクされます。brew install --cask claude で個別に入れても同じです。

アプリを起動してサインインし、Code タブを開きます。Claude Desktop アプリは Chat、Cowork、Code の 3 タブ構成で、ソフトウェア開発は Code タブが担当します。

Chrome 拡張を使う Claude in Chrome の側も同じくブラウザを操作できますが、有料プランと拡張の導入が前提で、操作対象も手元の実 Chrome になります。本記事では内蔵ブラウザに絞るため、こちらの設定には踏み込みません。

ハンズオン：フロントエンド開発の閉ループ

「コードを直す、ブラウザで確かめる、直しの正しさを確認する」の往復を、実際に小さなアプリで試します。

デモアプリを用意する

検証用に、使い捨ての Vite + React + TypeScript アプリを 1 つ作ります。

$ bun create vite browser-demo --template react-ts
$ cd browser-demo && bun install
$ bun run dev

題材として、バリデーションにバグを 1 つ仕込んだログインフォームを置きました。メールアドレスの形式チェックの条件が反転していて、正しいメールアドレスのときにエラーを出してしまいます。

// 意図的に仕込んだバグ。条件が反転している
if (isValidEmail(email)) {
  setError('メールアドレスの形式が正しくありません')
  return
}

見た目には気付きにくく、フォームを送信して初めて分かる種類のバグです。ブラウザで操作させて確かめるのに向いた題材です。

内蔵ブラウザで検証する

Code タブで開発サーバのプレビューを内蔵ブラウザのペインに表示し、Claude に次のように頼みます。

このプレビューを開いて、正しいメールアドレスと8文字以上のパスワードで
ログインを送信し、成功メッセージが出るか確認して

Claude が内蔵ブラウザでフォームに入力して送信し、結果を報告します。今回のアプリでは、正しい入力にもかかわらず「メールアドレスの形式が正しくありません」が表示され、条件が反転しているバグが表面化しました。

そのまま該当箇所の修正（isValidEmail(email) を !isValidEmail(email) に直す）を頼み、再読み込みして検証させると、同じ入力で「ログインに成功しました」が表示されます。無効なメールアドレスのときだけ形式エラーが出ることも確認できました。コードの編集と画面での確認が、同じ Claude のセッションの中で続けて進みます。

内蔵ブラウザはアプリ内のサンドボックスで動き、外部サイトを操作しようとすると安全性のレビューが入ります。初めてそのサイトを操作するときに、1 回だけ許可するか、常に許可するか、拒否するかを尋ねられ、権限はサイトごとに保存され、設定から取り消せます。セッションを永続させるかどうかも選べます。

Browser ペインは Cmd+Shift+B（Windows は Ctrl+Shift+B）で開けます。表示中のページの要素は Cmd+Shift+S で選択できます。ショートカットや UI の細部はバージョンで変わることがあるため、お使いのアプリでも確認してください。

Cursor / ChatGPT アプリとの違い

似た「エディタからブラウザを操作する」機能は、Cursor と OpenAI の製品にもあります。位置づけが違うので整理します。

Cursor には Cursor Browser があります。Chrome DevTools Protocol でブラウザを操作し、Cursor のタブに埋め込むか別ウィンドウで開きます。Agent Mode がこのブラウザで画面遷移やクリック、フォーム入力を行い、実装から UI での確認までをエディタ内で回せます。さらに Visual Editor では、要素をクリックして言葉で変更を指示すると、エージェントがコードに反映します。Cursor は VS Code をベースにした IDE で、こうしたブラウザ操作がエディタや拡張機能を含む開発環境の中に組み込まれています。

OpenAI 側は、ブラウザ操作をエージェントの一機能として提供してきました。ChatGPT Atlas は 2025 年 10 月に macOS で登場した AI ブラウザで、有料ユーザー向けの Agent Mode が Web 上の作業を代行します。ただし方向性は消費者向けのタスク寄りで、フロントエンド開発の閉ループを主眼にしたものではありません。さらに Atlas は 2026 年 8 月 9 日に単体提供を終了し、その機能は Chat、Work、Codex を束ねた統合版の ChatGPT デスクトップアプリへ集約される予定です。開発のエージェントは Codex が担当します。

軸ごとに並べると次のようになります。

機能の重なりと使い分け

公式ドキュメントで確認すると、Cursor の利点として挙がりやすい点の多くは、Claude Desktop アプリの Code タブにもあります。

Code タブは chat、diff、Browser、terminal、file editor などのペインを 1 ウィンドウに並べられ、コードとプレビューとエージェントを同じ画面に置けます。Browser ペインは Cmd+Shift+B で開き、Cmd+Shift+S で表示中のページの要素を選択できます。編集のたびに、スクリーンショット、DOM の確認、クリックやフォーム入力による自動検証まで走ります。要素を指して直し、その場で確かめる往復は、どちらのツールでも組めます^[1]。

違いは、環境のどこに寄せるかにあります。Cursor は VS Code をベースにした IDE で、ふだんのエディタや拡張機能の使い勝手がそのまま使えます。内蔵ブラウザは、Claude Code を主役にした開発にそのまま乗ります。サブスクリプション、CLAUDE.md、skills、MCP といった既存の設定の上にブラウザ操作が足され、コードの編集と画面での確認が同じセッションの中で地続きに進みます。別のエディタを導入して環境を作り直す必要はありません。

安全性の扱いも分かれます。内蔵ブラウザはログイン情報を持たないクリーンなプロファイルで動き、外部サイトの操作には毎回レビューが入ります。ログイン済みの状態でそのまま動かしたい場合は、手元の Chrome を使う Claude in Chrome に寄せる、という切り分けになります。

どちらが優れているというより、ふだん使うエディタに寄せるか、Claude を軸にした環境に寄せるかで選ぶ、という住み分けです。

おわりに

Claude Code の内蔵ブラウザを、Desktop アプリの導入から修正と検証の往復まで通して試しました。機能の面では Cursor と重なる部分が多く、ふだん使うエディタに寄せるか、Claude を軸にした環境に寄せるかで選ぶ住み分けだと整理できました。まずは各ツール間のブラウザ機能の違いやそれぞれの位置づけを押さえておくとよさそうです。

参考資料

• Claude Code
• Week 28 · July 6–10, 2026 のリリースノート（内蔵ブラウザ）
• Use Claude Code with Chrome（公式ドキュメント）
• Claude Desktop アプリ（公式ドキュメント）
• A visual editor for the Cursor Browser
• Introducing ChatGPT Atlas