Browser Inspector Mcp

What is Browser Inspector Mcp?

Browser Inspector Mcp gives your AI coding tool the same CSS visibility you have in browser DevTools. It is a debugging primitive—not a testing tool—that lets the AI see the real rendered class names, the full cascade of CSS rules, what is winning and why. It eliminates manual copy-paste and explains why a rule isn’t applying, pointing toward the likely cause. It is designed for developers using MCP-compatible AI tools (Claude Code, Cursor, Windsurf, Cline, etc.) who work on local web projects.

How to use Browser Inspector Mcp?

Install via npx: add the JSON config block to your AI tool’s MCP configuration file (locations vary by tool). Requirement: Node.js 18+, an MCP-compatible AI tool, and a running local dev server. On first use, tell your AI what URL your dev server is running on; the browser session persists for the entire conversation. The tool provides a single browser_inspect function with four actions: "dom" (rendered DOM), "styles" (full CSS cascade), "diff" (before/after verification), and "screenshot" (visual snapshot). On first run, Puppeteer downloads Chromium (~170MB).

Key features of Browser Inspector Mcp

• Gives AI access to real rendered DOM and computed CSS.
• Four actions: DOM, styles, diff, and screenshot.
• Browser session persists across an entire conversation.
• Explains why a CSS rule isn’t applying.
• No manual copy-paste of browser data required.
• Works with component libraries that generate runtime class names (Ant Design, Material UI, Radix, Shadcn).
• Designed for active local development workflows.

Use cases of Browser Inspector Mcp

• Fixing styling issues where AI reads source files but the browser renders different class names (e.g., Ant Design components).
• Verifying that a CSS change landed correctly in the browser.
• Debugging computed styles without opening DevTools or copy-pasting.
• For designers using AI coding tools to inspect and adjust visual output.
• For frontend engineers wanting their AI to inspect, change, and verify in one loop.

FAQ from Browser Inspector Mcp

Which MCP-compatible AI tools are supported?

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

What are the system requirements?

Node.js 18+, an MCP-compatible AI tool, and a running local dev server with a web project. The first use also downloads Chromium (~170MB) via Puppeteer.

How is this different from a testing tool?

Browser Inspector Mcp is a debugging primitive, not a testing tool—there is no test runner, no pass/fail. It only shows what the browser has rendered and why, without making assertions.

Does it work with public websites?

No. It is designed for active development workflows and requires a local web project running on your computer (e.g., a React, Vue, or similar app on localhost).

How does the browser session work?

The headless Chromium session persists for the whole conversation. You only need to mention your dev server URL once; the AI can keep inspecting, verifying, and screenshotting without reconnecting.