browser-inspector-mcp

Before your AI writes CSS,
let it see the browser.

The same CSS visibility you get in DevTools — rendered class names, the full cascade, what's winning and why — available to your AI automatically.

Get started
The problem

You ask your AI to fix a styling issue. It reads the source files, writes a change, applies it. You check the browser. Still wrong. A few more rounds. Eventually you open DevTools yourself, copy the element, paste it back into the chat — and only then does the AI understand what it was working with.

Modern component libraries generate their own class names at runtime. Your JSX says <Menu>. The browser renders ant-dropdown-menu-item-container. The AI writes CSS for what it found in the source. The rule never applies.

Source file vs live DOM — the class names don't match
One tool, four actions
browser_inspect dom Real rendered HTML, before the AI writes any CSS
▾
Returns
The live DOM for any selector — actual runtime class names, nesting, attributes. Not what's in your source files.
Use when
Before writing any CSS. Component libraries generate class names at runtime that don't appear in source.
Example
action: "dom", selector: ".sidebar-menu"
browser_inspect styles Full CSS cascade — every rule, where it came from, what's winning
▾
Returns
Every matched CSS rule for an element: stylesheet, line number, computed value, and whether it's active or overridden.
Use when
A style change isn't showing up. Find out if your rule reached the element and what's overriding it.
Example
action: "styles", selector: ".btn-primary", properties: ["color", "background"]
browser_inspect diff Before/after comparison — confirms a change actually landed
▾
Returns
A diff of computed styles between two snapshots. First call saves the baseline. Second call — after an edit — shows exactly what changed.
Use when
After making a CSS change. Verifies the rule applied — or tells you definitively that nothing changed.
Example
action: "diff", selector: ".card-header"
browser_inspect screenshot Visual snapshot of any element, returned inline
▾
Returns
A cropped screenshot of the matched element. Rendered at 1440×900 — may not match your viewport at other sizes.
Use when
You want the AI to see what an element looks like, not just its computed values.
Example
action: "screenshot", selector: "#modal-overlay"
How it works
You describe the problem
"The icon isn't picking up the brand color"
AI inspects the DOM
browser_inspect(action="dom", selector=".panel-header") — sees real runtime class names
AI reads the full cascade
browser_inspect(action="styles", selector=".panel__header-icon") — sees the overriding rule and where it comes from
AI writes the fix
Targets the correct rule in the correct file — first try
AI verifies the change landed
browser_inspect(action="diff", selector=".panel__header-icon") — confirms exactly which properties changed
Done
No DevTools. No copy-paste. No back-and-forth.
Get started

Add to your AI tool's MCP config file and restart.

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}
  • Claude Code ~/.claude.json
  • Cursor Settings → MCP, or ~/.cursor/mcp.json
  • Windsurf ~/.codeium/windsurf/mcp_config.json
  • Others Any MCP-compatible client — same config block

First call, pass your dev server URL. The session stays open for the rest of the conversation.

On first use, Puppeteer downloads Chromium (~170MB).

If you're reading this tab, you're probably where I was not long ago — you've seen people demo AI coding tools, thought "I want that," and then hit a wall of setup steps that assume you already know what you're doing.

There are only three things you need before this works. You might already have some of them without knowing it.

Do you have Node.js?

Node.js is what actually runs this tool on your computer. You don't need to know anything else about it.

Open Terminal on Mac (Cmd+Space → type "Terminal") or Command Prompt on Windows, and type:

node --version

If a number comes back — like v20.11.0 — you have it, skip ahead. If you get an error, go to nodejs.org, download the version that says "Recommended for most users," run the installer, and come back.

Never opened Terminal before? It's just a text window. It can't hurt anything.

Do you have an AI coding tool?

This is the thing you type into when asking AI to write or fix code. This tool works with all of these:

  • Cursor — easiest starting point if you're coming from design. Like a code editor with AI built in. cursor.com
  • Claude Code — runs in your Terminal. More minimal.
  • Windsurf, Cline, Continue — all work the same way with this tool.

If you don't have one yet, start with Cursor.

Do you have a project running locally?

This tool needs something to look at — a web project running on your computer, the kind that opens at an address like http://localhost:3000. That's what you'll point it at.

If you don't have that yet, get a project running first and come back.

Add the config

You're going to add a small block of text to a config file for your AI tool. It looks scarier than it is — it's just a structured text file.

Cursor — go to Settings → MCP inside Cursor. There's a UI to add a new server directly, no file editing needed.

Don't see MCP in Settings? Your Cursor might need an update.

Claude Code — open Terminal and run:

open -e ~/.claude.json

If it says the file doesn't exist, create a blank one in TextEdit and save it as .claude.json in your home folder (the folder with your name in Finder). Then paste this inside it:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Already have other things in that file? Add just the "browser-inspector" block inside the existing "mcpServers" section. Don't replace what's already there.

Windsurf — open ~/.codeium/windsurf/mcp_config.json and add the same block above.

Restart your AI tool.

Fully close it and reopen it. This is the step people miss — the config only loads on startup.

First use

Just tell your AI what you're working on and where it's running:

I'm looking at the dashboard at http://localhost:5173 —
the button styles aren't applying correctly.

The tools show up automatically — you don't call them by name. The first time it runs it downloads a small browser in the background (~170MB). That's normal, just let it finish. After that, it's instant.