The chrome-devtools-mcp https://github.com/ChromeDevTools/chrome-devtools-mcp/ [1]

Is an official MCP (Model Context Protocol) server from the chrome team that gives AI coding agents direct access to a live chrome browser and its DevTools Capabilities.

Why is this important? It gives your AI a way to access the internet via its own Chrome browser so its not coding blind. It can make a change and see that change in its own browser.

Some pre-setup

I got this working on my Ubuntu 24.04 WSL system using Grok (see https://www.whiteboardcoder.com/2026/07/grok-and-chrome-devtools-mcp.html [2])

I had to install Chrome on Ubuntu using the following command (for WSL)

Here is a simple procedure to fix this. (For Ubuntu 24.04 in WSL)

> wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
> sudo apt install ./google-chrome-stable_current_amd64.deb
> rm google-chrome-stable_current_amd64.deb

Now test it.

> google-chrome --version

Chances are you do not have my setup but just wanted to show what I had to do.

Getting it set up

Start Claude

> claude

Add the marketplace

> /plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Success

Install the plugin

> /plugin install chrome-devtools-mcp@chrome-devtools-plugins

Select User Scope

Installed

Restart Claude

And lets try it out.

> Open https://example.com and take a screen shot

That opened chrome and it also took a screen shot and saved it as a .png file.

OK can I do this headless ( and not open the chrome browser)

> Open https://example.com and take a screen shot, but do it in headless mode

That worked… but it took a while.

And it was a little Kludgy

So let’s add some stuff to ~/.claude.json

> vi ~/.claude.json

And update your mcpServers section

"mcpServers": {
"my-prompt-server": {
"type": "http",
"url": "http://localhost:8000/mcp"
}
  "chrome-devtools": {
  "command": "npx",
  "args": ["chrome-devtools-mcp@1.6.0", "--headless=true"]
  }
},