A common headache in AI Agent-assisted development is describing a UI or Frontend issue to your Agent. Google has announced a preview tool that helps to bridge this gap. The "Chrome DevTools (MCP)" allows your coding agent to access various information directly from the browser. This includes taking screenshots, debugging tools, performance insight, and others.

In this article, we want to use this MCP with Claude Code on a Mac.

Set up Claude's MCP

1) Enter the following command in your terminal:

claude mcp add --transport stdio chrome-devtools npx chrome-devtools-mcp@latest

This sets up a stdio-based local MCP server with Claude Code.

2) When you try to use the MCP for the first time, macOS might require you to enable app management permission depending on where you run the command. In my case, I am running it within RubyMine, so I have to enable the permission and restart the IDE.

Using the tool

1) If you are running the dev server manually, you will need to notify Claude where you are running the site (E.g., http://localhost:3003). Claude will initiate a navigation to a specific page depending on needs.

2) A standalone instance controlled via the MCP will be launched.

3) Claude uses tools exposed in the MCP server, for example, taking a screenshot.

4) Or accessing the browser console to read errors.