Desktop の Browser ペインとプレビューサーバー

概要

デスクトップアプリの Code タブでは、Claude が dev サーバーを起動して Browser ペインで自分の変更を検証できる。フロントエンドの web アプリだけでなくバックエンドのサーバーにも使え、API エンドポイントの検査・サーバーログの閲覧・見つけた問題の修正まで行う。Browser ペインはタブ付きのブラウザでもあり、外部サイトを並べて開ける。

仕様

アプリのプレビュー

多くの場合、Claude はプロジェクトのファイルを編集した後に自動でサーバーを起動する。任意のタイミングでプレビューを依頼することもできる
既定では編集のたびに auto-verify が走る
Browser ペインはプロジェクト内の静的 HTML・PDF・画像・動画も開ける。チャット内のそれらのパスをクリックするとここで開く
ペインからできること
- 動作中のアプリを直接操作する
- Claude が自分の変更を検証する様子を見る（スクリーンショット取得、DOM 検査、要素のクリック、フォーム入力、見つけた問題の修正）
- session toolbar のサーバードロップダウンからサーバーを起動・停止する
- ドロップダウンで Persist sessions を選ぶと、サーバー再起動をまたいで cookie と local storage を保持する（開発中に再ログインしないで済む）
- サーバー設定の編集、全サーバーの一括停止
保存されたセッションデータの消去と Browser の無効化は Settings → Claude Code のトグル

外部サイトの閲覧

開き方: Cmd+Shift+B（macOS）／Ctrl+Shift+B（Windows）、または Views メニュー
チャット内の外部リンクをクリックすると、Open in app（Browser ペイン）と Default browser（自分のブラウザ）を選ぶダイアログが出る。Cmd（macOS）／Ctrl（Windows）クリックでシステムのブラウザへ直接開く
ペイン内でサイトにサインインできる。Google OAuth のようなポップアップのサインインフローも通る
Claude はアプリ検証と同じツールで外部ページを読み・操作するが、2 つの安全検査が追加される
- safety classifier がクリックや入力などの書き込み操作をすべての permission mode で検査する。 auto mode が使うものと同じ classifier で、フラグが立つとモードに関わらず確認を求められる
- Auto と Bypass permissions 以外のモードでは、新しいサイトへ移動する前にドメイン許可リストの検査も走る

サイトごとの承認

Claude が外部サイトで最初に操作するとき、許可カードが出て Claude は選択を待つ。Allow once（保存しない）／Always allow（その端末にそのサイトの承認を保存。Settings で取り消せる）／Deny
サブドメインを含め、サイトごとに個別の承認が要る
ローカルの dev サーバーとプロジェクトのファイルは承認不要。auto-verify は確認なしで動き続ける
承認済みのサイトでも、Claude は入力なしに購入・アカウント作成・CAPTCHA の回避を行わない。安全モデルは Claude in Chrome 拡張と同じ

Browser ペインと Chrome 拡張の使い分け

Browser ペインは自分のブラウザとは別のクリーンなプロファイルを使い、保存済みのログインや履歴を持たない。 アプリの構築とテスト、身元を必要としないサイトに使う
ログイン済みのセッションで「自分として」動かしたいときは Claude in Chrome 拡張を使う

組織による制限

Browser は Claude in Chrome 拡張と同じサイトの許可リスト・ブロックリストに従う。拡張向けに設定済みなら Browser も自動的に従う
管理者は managed setting の browserExternalPageTools で外部ページ上の Claude のツールを無効化できる。この場合ユーザーは外部サイトへ移動できるが、Claude のツールは読み取りも操作もできない
managed setting の disableBrowserExternalNavigation を true にすると外部への移動を全面的に止める。組織の許可リストにあるサイトも含めてブロックされるが、localhost の dev サーバーとファイルのプレビューは動き続ける

プレビューサーバーの設定（`.claude/launch.json`）

Claude は dev サーバーの構成を自動検出し、セッション開始時に選んだフォルダのルートの .claude/launch.json に保存する
プレビューはこのフォルダを作業ディレクトリとして使う。親フォルダを選んだ場合、独自の dev サーバーを持つサブフォルダは自動検出されない。そのフォルダで直接セッションを始めるか、設定を手で足す
変更はファイルを直接編集するか、サーバードロップダウンの Edit configuration。JSON with comments に対応する

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "my-app",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 3000
    }
  ]
}

`configurations` のフィールド

フィールド	型	内容
`name`	string	このサーバーの一意な識別子
`runtimeExecutable`	string	実行するコマンド（`npm`、`yarn`、`node` など）
`runtimeArgs`	string[]	`runtimeExecutable` に渡す引数（`["run", "dev"]` など）
`port`	number	サーバーが待ち受けるポート。既定は 3000
`cwd`	string	プロジェクトルートからの相対の作業ディレクトリ。既定はプロジェクトルート。`${workspaceFolder}` でルートを明示できる
`env`	object	追加の環境変数。このファイルはリポジトリにコミットされるため秘密情報を置かない。 dev サーバーへ秘密情報を渡すなら local environment editor を使う
`autoPort`	boolean	ポート衝突時の扱い（下記）
`program`	string	`node` で実行するスクリプト
`args`	string[]	`program` に渡す引数。`program` を設定したときのみ使われる
`url`	string	`http://localhost:<port>` の代わりにプレビューが開くアドレス

runtimeExecutable + runtimeArgs はパッケージマネージャ経由の起動、program は node で直接実行するスクリプト（"program": "server.js" は node server.js）
autoVerify: 設定の最上位に "autoVerify": false を置くと、編集のたびの自動検証を止められる。サーバードロップダウンからも切り替えられる。既定は有効。 無効にしてもプレビューのツールは使えるので、任意のタイミングで検証を依頼できる

`url` を指定する場合

既定では http://localhost:<port> を開く。ローカル HTTPS が要る、*.localhost サブドメインを使う、リダイレクトでサインインする、といった場合に url を設定する
localhost 系（localhost、*.localhost サブドメイン、127.0.0.1、::1）は既定のポートアドレスと同じく直接開く
セキュリティ上、localhost の url はサーバーのオリジンだけでなければならない。 パスもクエリも付けられず、ポートはそのエントリの port と一致させる。特定のページを見せたいならプレビューを開いた後に Claude へ移動を依頼する。パス・クエリ・不一致のポートを含む localhost の url は設定エラーとして報告され、修正方法が示される
それ以外のアドレスは、プレビューが最初に開くときに許可を求められる（新しいサイトを閲覧するときと同じ）。外部アドレスはパスを含んでよい。Always allow で以後の確認を省ける。外部サイトを制限する組織のポリシーは引き続き適用される
コマンドを書かずに url だけを設定すると、自分で起動済みのサーバーにプレビューを接続する（起動しない）
url は http か https で、ユーザー名・パスワードを含んではならない

ポート衝突（`autoPort`）

値	挙動
`true`	空いているポートを自動で見つけて使う。多くの dev サーバーに向く
`false`	エラーで失敗する。OAuth コールバックや CORS 許可リストなど、特定のポートが必須の場合に使う
未設定（既定）	そのポートが必須かを尋ね、回答を保存する

Claude が別のポートを選んだ場合、割り当てたポートを PORT 環境変数でサーバーへ渡す。

制約・注意点

.claude/launch.json はリポジトリにコミットされる前提のファイル。 env に秘密情報を書かない
プレビューの作業ディレクトリはセッション開始時に選んだフォルダ。 モノレポで親を選ぶとサブフォルダのサーバーは自動検出されない
Browser ペインには自分のログイン状態が無い。 ログイン済みの状態で操作させたい場合は Claude in Chrome 拡張の担当