Gives your AI coding tool the same CSS visibility you have in browser DevTools.
browser-inspector-mcp
Gives your AI coding tool the same CSS visibility you have in browser DevTools.
Before your AI writes CSS, let it see what's actually in the browser — the real rendered class names, the full cascade of rules, what's winning and why. Same data a human gets from DevTools. Zero manual copy-paste.
TLDR — I know what I'm doing, just show me the setup
Requirements: Node.js 18+, an MCP-compatible AI tool (Claude Code, Cursor, Windsurf, Cline, etc.), a running local dev server.
Config (add to your AI tool's MCP config file):
{
"mcpServers": {
"browser-inspector": {
"command": "npx",
"args": ["-y", "browser-inspector-mcp"]
}
}
}
Config file locations:
- Claude Code:
~/.claude.json - Cursor:
~/.cursor/mcp.jsonor.cursor/mcp.json - Windsurf:
~/.codeium/windsurf/mcp_config.json - Others: wherever your tool reads MCP server config
Restart your AI tool. First call, tell your AI what URL your dev server is running on — the browser session persists for the rest of the conversation.
One tool, four actions: browser_inspect with action: "dom" (rendered DOM), "styles" (full CSS cascade), "diff" (before/after verification), "screenshot" (visual snapshot). Or just describe what you need — Claude picks the right action.
On first use, Puppeteer downloads Chromium (~170MB).
Teach me — I'm new to this, walk me through everything
Before you start — what you need
This tool connects two things you need to already have set up: an AI coding tool and a web project you're actively working on. Here's what each of those means and how to get them.
1. Node.js (the engine that runs this tool)
Node.js is a program that lets your computer run JavaScript outside of a browser. npm and npx — the commands used to install and run this tool — come included with Node.js.
Do you already have it? Open Terminal (Mac) or Command Prompt (Windows) and type:
node --version
If you see a version number like v20.11.0, you're good. If you get an error, you need to install it.
Install it: Download from nodejs.org — get the LTS version (the one labeled "Recommended for most users"). Run the installer. That's it.
2. An AI coding tool
This is the tool you type into when asking AI to write or fix code. This MCP server works with any of the following — you only need one:
| Tool | What it is | Get it |
|---|---|---|
| Claude Code | Anthropic's AI in your terminal | claude.ai/code |
| Cursor | AI-first code editor (like VS Code with AI built in) | cursor.com |
| Windsurf | AI code editor by Codeium | codeium.com/windsurf |
| Cline | AI coding extension for VS Code | VS Code extension marketplace |
| Continue | Open-source AI coding assistant | continue.dev |
If you don't have one yet and you're not sure where to start: try Cursor. It has the gentlest learning curve if you're coming from a design background.
3. What MCP is (one sentence)
MCP (Model Context Protocol) is a standard way to give AI tools access to extra capabilities — like a browser, a database, or your file system. This tool is one of those capabilities. You install it by adding a few lines of config to your AI tool, and it shows up automatically in your AI's toolbox.
4. A web project running locally
This tool inspects CSS in a live browser. That means you need a web project running on your computer — usually a React, Vue, or similar app that you're actively developing.
When you run your project locally, it opens at an address like http://localhost:5173 or http://localhost:3000. That's the URL you'll give this tool.
If you don't have a local project, this tool won't have anything to inspect. It's designed for active development workflows, not for inspecting live public websites.
How to install
You don't need to install anything upfront. When you configure your AI tool (next step), it will download and run browser-inspector-mcp automatically the first time it's needed using a tool called npx.
The first time it runs, it will also download a browser called Chromium (~170MB). This is the headless browser the tool uses to inspect your page — it runs invisibly in the background and has nothing to do with your regular Chrome or Safari.
How to configure your AI tool
You need to add a small piece of configuration — a JSON block — to a file on your computer. JSON is just a structured text format. The
Tools (1)
browser_inspectInspects a local web project to provide DOM structure, CSS cascade details, visual diffs, or screenshots.Configuration
{"mcpServers": {"browser-inspector": {"command": "npx", "args": ["-y", "browser-inspector-mcp"]}}}