Build Great Products
Skool.com/aiapps

AI TOOL · GUIDE

Claude Code Browser.

How the Browser pane in the Claude Code desktop app works — Claude previews your app, clicks through it, and fixes what it finds, while you browse docs and sign in to sites right next to your code.

20 Jul 2026·8 min read·By Chris Ashby
claude-codeanthropicbrowserdesktop-appagentspreview

01

What is the Browser pane?

The Browser pane is a full tabbed web browser built into the Claude Code desktop app— and it's shared between you and Claude. It does two jobs at once. First, it's where your app runs while you build: Claude starts your dev server, opens the preview, and checks its own work in it. Second, it's a regular browser you can use for anything else — documentation, issue trackers, staging sites — arranged right next to your chat and code.

The important shift is that Claude can see and use the same browser you're looking at. It takes screenshots, inspects the page, clicks buttons, and fills forms — which means "build me a signup page" ends with Claude actually trying the signup page, not just claiming the code looks right.

02

Where to find it

You need the Claude desktop app — available for macOS, Windows, and Linux (beta) from the Claude Code docs. The app has three tabs — Chat, Cowork, and Code — and the Browser pane lives in the Code tab, alongside the other panes you can arrange freely: chat, diff, terminal, file editor, plan, and tasks.

Three ways to open it:

  • Press Cmd+Shift+B on macOS or Ctrl+Shift+B on Windows.
  • Select it from the Views menu in the session toolbar.
  • Just ask — Claude opens it automatically whenever it previews your app.

Panes drag by their headers and resize by their edges, so a common layout is chat on the left, Browser on the right — a live view of the thing you're describing.

03

Preview your app

In most cases you don't set anything up: after editing project files, Claude starts the dev server automatically and opens it in the Browser pane. This works for frontend apps and backend servers alike — Claude can test API endpoints, watch server logs, and iterate on what it finds. You can also ask for a preview at any time.

From the pane you can:

  • Use your app directly— it's a real browser, so click around as your users would.
  • Start or stop servers from the server dropdown in the session toolbar.
  • Persist sessions— keep cookies and local storage across server restarts, so you don't re-login to your own app every time.

Claude creates the initial server configuration by reading your project. If your app needs a custom dev command, edit .claude/launch.json:

.claude/launch.json
{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "next",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 3000
    }
  ]
}

04

Watch Claude verify itself

This is the part that changes how you work. By default, Claude auto-verifies changes after every edit: it reloads the preview, takes screenshots, inspects the DOM, clicks elements, fills forms — and fixes the issues it finds before telling you it's done.

In practice that closes the most annoying loop in AI-assisted building: the "it says it's done but the button doesn't work" cycle, where you were the QA department. With the Browser pane, the first person to click the broken button is Claude, not you.

05

Browse external sites

The Browser pane is tabbed, so your running app can sit next to documentation, an issue tracker, or any other site. When you click an external link in the chat, a chooser offers Open in app (the Browser pane) or Default browser (your own); Cmd-click (macOS) or Ctrl-click (Windows) skips the chooser and goes straight to your system browser.

You can sign in to sites inside the pane — including popup sign-in flows like Google OAuth — and Claude can read and interact with external pages using the same tools it uses to verify your app. That means you can say "read this library's docs and use the new API" or "check the staging site" and Claude does it in a tab you can watch.

06

Permissions and safety

External browsing comes with guardrails layered on top of the normal permission modes:

  • Per-site approval. The first time Claude acts on an external site, a permission card appears — Allow once, Always allow (saved per site on your device, revocable in Settings), or Deny. Every site needs its own approval, subdomains included.
  • Safety classifiers.Claude's write actions on external pages — clicking, typing — are reviewed by safety classifiers in every permission mode. If one flags an action, you get a prompt regardless of mode.
  • Hard limits.Even on an approved site, Claude won't purchase items, create accounts, or bypass CAPTCHAs without your input.

It's the same safety model as the Claude in Chrome extension. Organisations get extra controls: site allowlists and blocklists, a managed setting to disable Claude's tools on external pages, and one to turn off external browsing entirely — dev server previews keep working in every case.

07

Browser pane vs the Chrome extension

Claude can drive two different browsers, and they're for different jobs:

Browser pane — a clean room

A fresh browser profile with none of your logins or history.
Use it for building and testing your app, and for sites that don't need your identity.

Claude in Chrome — acts as you

An extension in your real Chrome, sharing your logged-in sessions.
Use it when the task genuinely needs your accounts — your email, your dashboards, your tools.

08

Sources