Browser Inspector MCP Server

MCP server that gives AI coding tools the same CSS visibility you have in DevTools — rendered class names, full cascade, what's winning and why.

Local serverstdioGo

What is the Browser Inspector MCP Server?

MCP server that gives AI coding tools the same CSS visibility you have in DevTools — rendered class names, full cascade, what's winning and why.

What the server does

A debugging primitive, not a testing tool — no test runner, no pass/fail. 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. When something doesn't work, the tool explains why and points toward the likely cause.

Credentials and setup notes

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

More MCP options

Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.

Maintainer setup documentation.

How to install the Browser Inspector MCP Server

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

Configuration as documented by the project. Restart the client after saving.

Configuration

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

VariableDescriptionRequired
BROWSER_INSPECTOR_HOSTEndpoint or connection string the server talks to.Optional

Example prompts to try

  • “Use Browser Inspector MCP to Cursor.”
  • “Use Browser Inspector MCP to Windsurf.”

Frequently asked questions

The tool works with Claude Code, Cursor, Windsurf, Cline, Continue, and any MCP-compatible coding tool that accepts the same JSON configuration.