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.
Connect Browser Inspector MCP to Claude, Cursor or any other MCP client and it stops being a tab you switch to. 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. The browser inspector mcp mcp server is what makes that connection.
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.
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
Cursor — In Cursor, go to: Settings → MCP — there's usually a UI to add MCP servers directly, which is easier than editing the file manually. If youWindsurf — Open the file, add the same JSON block, save, and restart WindsurfConfiguration is passed through the environment: BROWSER_INSPECTOR_HOST. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
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. ---
Setup follows the usual MCP pattern — install or clone the server, register it in your client's configuration file, restart the client. The configuration blocks on this page cover the common clients.
This sits in the browser automation group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Browser Inspector MCP's toolset — Cursor, Windsurf — is a fair guide to whether it matches your workflow. It is maintained by betson-uni; worth a glance at recent repository activity before you build anything load-bearing on it.
This entry was verified against Browser Inspector MCP's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
| Tool | What it does |
|---|---|
| Cursor | In Cursor, go to: **Settings → MCP** — there's usually a UI to add MCP servers directly, which is easier than editing the file manually. If you prefer to edit the file, add the same JSON block above. |
| Windsurf | Open the file, add the same JSON block, save, and **restart Windsurf**. |
{
"mcpServers": {
"browser-inspector": {
"command": "npx",
"args": ["-y", "browser-inspector-mcp"]
}
}
}Configuration as documented by the project. Restart the client after saving.
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. ---
| Variable | Description | Required |
|---|---|---|
| BROWSER_INSPECTOR_HOST | Endpoint or connection string the server talks to. | Optional |
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.