How to Set Up Browser MCP in Claude Code

Sat, 24 Jan 2026 00:00:00 +0000

How to set up MCP for browser

Create .mcp.json in your project directory with the following content:

{
 "mcpServers": {
 "chrome-devtools": {
 "command": "npx",
 "args": ["-y", "chrome-devtools-mcp@latest"]
 }
 }
}

Then run the following command in your terminal:

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Then in Claude Code, run /mcp to verify the connection:

# start claude code cli
claude
# run /mcp inside cli
/mcp
─────────────────────────────────────────────────────────────────────────────────
 Manage MCP servers
 2 servers

 Project MCPs (/Users/zhisme/projects/my-project/.mcp.json)
 ❯ chrome-devtools · ✔ connected

Afterwards, run a sample command to verify that the browser MCP can start:

 ▐▛███▜▌ Claude Code v2.1.17
▝▜█████▛▘ Opus 4.5 · Claude Max
 ▘▘ ▝▝ ~/dev/projects/new-magtuner/mt-editor

❯ open with browser mcp url google.com

⏺ chrome-devtools - navigate_page (MCP)(type: "url", url:
 "https://www.google.com")
 ⎿  # navigate_page response
 Successfully navigated to https://www.google.com.
 ## Pages
 1: https://www.google.com/ [selected]

⏺ Opened google.com in the browser. The page is loaded and selected.

If you see a Google Chrome for Testing window like in the screenshot below, then everything is set up correctly. You can now tell Claude to visually verify your rendered pages.

Google chrome via browser mcp

Mcp on @zhisme :: signal over noise

How to Set Up Browser MCP in Claude Code

How to set up MCP for browser