Book a Call
Back to Free Game

How to Set Up Claude Remote Control (Browser + Code in One)

Step-by-step guide to connecting Claude Code to your browser so it can build, click, type, screenshot, and control Chrome — all from your terminal.

What Is Claude Remote Control?

Claude Remote Control lets Claude Code — the CLI agent that lives in your terminal — take over your Chrome browser. It can click buttons, fill out forms, take screenshots, read page content, and navigate the web, all while simultaneously writing and editing your code.

This means you can say things like "build me a landing page and then preview it in Chrome" and Claude will write the code, spin up a dev server, open the browser, and verify the result — hands-free.

What you need:

  • A Mac, Windows, or Linux machine
  • Google Chrome installed
  • Node.js 18+ installed
  • A Claude Pro, Max, or Team subscription (for Claude Code access)

Step 1 — Install Claude Code

Open your terminal and run:

npm install -g @anthropic-ai/claude-code

Once installed, navigate to any project folder and type:

claude

This launches the Claude Code CLI. You will be prompted to sign in with your Anthropic account on first run. Follow the browser auth flow to connect your account.

Verify it works: After signing in, type "hello" in the Claude Code prompt. If Claude responds, you are good to go.

Step 2 — Install the Chrome Extension

Claude controls Chrome through a companion browser extension called Claude in Chrome. This is what bridges your terminal to the browser.

  1. Open Chrome and go to the Chrome Web Store
  2. Search for "Claude Code" or "Claude in Chrome"
  3. Click Add to Chrome and confirm the installation
  4. You should see the Claude icon appear in your extensions toolbar

Pin the extension: Right-click the extensions puzzle icon and pin Claude so it is always visible. You will use it to manage the connection.

Step 3 — Connect Claude Code to Chrome

This is where the magic happens. You need to link your running Claude Code session to the Chrome extension.

  1. Make sure Claude Code is running in your terminal (claude command)
  2. Click the Claude in Chrome extension icon in your browser toolbar
  3. The extension will automatically detect your running Claude Code session
  4. Click Connect when prompted
  5. You should see a confirmation that the connection is active

How it works: The extension runs a local MCP (Model Context Protocol) server that Claude Code communicates with. No data leaves your machine — it is all local.

Troubleshooting: If the extension does not detect Claude Code, try restarting both Chrome and your terminal session. Make sure no firewall is blocking local connections.

Step 4 — Test the Connection

Now let's verify everything is wired up. In your Claude Code terminal, try:

  • "Take a screenshot of the current tab" — Claude should capture what is on screen and show it to you
  • "Navigate to google.com" — Claude should open Google in your connected Chrome tab
  • "Click the search bar and type hello" — Claude should interact with the page

If all three work, your remote control setup is complete.

Step 5 — Set Up the Preview Server (Optional but Recommended)

For web development, Claude can also spin up a dev server and preview your app directly in the browser. This uses the Claude Preview tool.

  1. In your project root, create a file at .claude/launch.json:
{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "dev",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 3000
    }
  ]
}
  1. Now you can tell Claude: "Start the dev server and take a screenshot"
  2. Claude will run your dev server, open the preview, and show you the result

This is extremely powerful for iterating on UI — Claude can build a component, preview it, spot issues in the screenshot, and fix them automatically.

What You Can Do Now

With remote control connected, Claude can:

  • Build and verify UI — Write code, preview it, screenshot it, fix visual bugs
  • Fill out web forms — Automate repetitive form submissions
  • Scrape and read pages — Extract text, data, or structure from any webpage
  • Test user flows — Click through your app like a real user would
  • Debug visually — Take screenshots at each step to identify layout issues
  • Navigate and research — Open docs, read API references, pull in context

Pro tip: Combine this with Claude Code's file editing abilities. Say "read the docs at this URL and then update my code to match the API" — Claude will browse the docs, extract what it needs, and write the code.

Common Issues & Fixes

Extension not connecting

  • Restart Chrome completely (quit and reopen)
  • Restart your Claude Code session
  • Make sure you only have one Claude Code instance running

Claude cannot see the page

  • Check that the tab is in the correct tab group managed by the extension
  • Try creating a new tab through Claude: "create a new browser tab"

Screenshots are blank

  • Some pages block screenshots due to security policies
  • Try navigating to a different page first to confirm the connection works

Slow responses

  • Browser automation adds latency compared to pure code editing
  • For code-only tasks, you do not need the browser connected

Need more help? Book a free call and we will walk you through the setup live.

Need help? Text Drew directly