---
title: Claude Code's vision - The Chrome DevTool MCP
url: https://calvin.my/posts/claude-code-s-vision-the-chrome-devtool-mcp
published: 2025-10-18
updated: 2026-09-16
category: Development
tags:
- Claude Code
- Chrome
- mcp
summary: Google’s preview Chrome DevTools MCP helps AI coding agents inspect frontend issues directly in the browser, reducing the need to describe UI problems manually. The post shows how to connect it to Claude Code on macOS, including potential permission requirements. Once connected to a local development site, Claude can launch a managed browser instance and use DevTools capabilities such as screenshots, console error inspection, debugging, and performance insights.
---

# Claude Code's vision - The Chrome DevTool MCP

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)](https://developer.chrome.com/blog/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:

   ```bash
   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.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/1cf8f5f8-c469-417f-8f93-d8ba18095fc6.png)

* * *

## 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.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/7b430322-fc7c-415a-94c4-351d0dadaee5.png)

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

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/63a601e9-0742-4c69-a9ad-a9a7762f39af.png)

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

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/240f011d-f250-4fb3-b7d8-5bb0dcecbc51.png)

4. Or accessing the browser console to read errors.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/c51e243e-21b7-4842-b368-81541fdfe675.png)