> ## Documentation Index
> Fetch the complete documentation index at: https://www.activepieces.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect Claude to Chrome

This guide explains how to set up the Chrome DevTools MCP server so Claude Code can inspect and control your Chrome browser.

## Linux

### 1. Start Chrome with remote debugging

```bash theme={null}
google-chrome --remote-debugging-port=4222 --user-data-dir=/tmp/chrome-debug
```

### 2. Install Claude Code

```bash theme={null}
npm i -g @anthropic-ai/claude-code
```

### 3. Add the Chrome DevTools MCP

```bash theme={null}
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --browserUrl=http://localhost:4222
```

> Make sure the port in `--browserUrl` matches the `--remote-debugging-port` you used when launching Chrome.

***

## Windows + WSL

### 1. Configure WSL mirrored networking

Create a file called `.wslconfig` in your Windows user profile directory (`%USERPROFILE%`, e.g. `C:\Users\YourName\.wslconfig`) with the following content:

```ini theme={null}
[wsl2]
networkingMode = mirrored
```

> **Important:** The file must be named exactly `.wslconfig` — not `.wslconfig.txt`. If you created it with Notepad, double-check that it didn't append `.txt` to the filename.

After creating or editing the file, restart WSL:

```powershell theme={null}
wsl --shutdown
```

### 2. Install Claude Code and add the MCP (inside WSL)

Open your WSL terminal and run:

```bash theme={null}
npm i -g @anthropic-ai/claude-code
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --browserUrl=http://localhost:4222
```

### 3. Start Chrome on Windows

Open **cmd** or **PowerShell** on Windows and run:

```cmd theme={null}
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=4222 --user-data-dir="%TEMP%\chrome-debug"
```

> The port must match the one you used in the `--browserUrl` flag above.

***

## Verify the connection

### 1. Check the debug endpoint

Open your browser and navigate to:

```
http://localhost:4222/json/version
```

You should see a JSON response like this:

```json theme={null}
{
  "Browser": "Chrome/147.0.7727.55",
  "Protocol-Version": "1.3",
  "User-Agent": "Mozilla/5.0 ...",
  "V8-Version": "14.7.173.16",
  "WebKit-Version": "537.36 (...)",
  "webSocketDebuggerUrl": "ws://localhost:4222/devtools/browser/..."
}
```

If you see this, the debug protocol is active.

### 2. Check the MCP connection in Claude Code

Inside Claude Code, run:

```
/mcp
```

You should see `chrome-devtools` listed as a connected MCP server. If it appears with a green status, Claude can communicate with your browser.

***

## Devcontainer

The devcontainer is already configured to set up the Chrome DevTools MCP automatically. The `postCreateCommand` in `.devcontainer/devcontainer.json` installs dependencies and registers the MCP server, resolving the host IP via `host.docker.internal`:

```json theme={null}
"postCreateCommand": "bun install && HOST_IP=$(getent ahostsv4 host.docker.internal | awk '{print $1}' | head -1) && claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --browserUrl=http://${HOST_IP}:4222"
```

All you need to do is:

1. Start Chrome on your host machine with `--remote-debugging-port=4222` (see the Linux or Windows sections above).
2. Inside the devcontainer, verify the MCP is registered by running `/mcp` in Claude Code.