Advertise
MCP.so
Sign In

Browser Inspector MCP Server

@betson-uni

RepositoryHomepage

Basic information

Category

Browser Automation

License

MIT

Transports

stdio

Author

betson-uni

Submitted by

Betson George

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

#css#devtools#browser#inspector#cascade#dom#frontend#puppeteer

Browser Inspector MCP Server config

Add this server to your MCP-compatible client using the configuration below.

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

Browser Inspector MCP Server tools

1

Inspects a live browser page to get CSS and DOM information — the same data a human sees in browser DevTools. Use this before writing or debugging CSS to verify what the browser actually renders, not just what the source code says. Four actions available: 'dom' gets the rendered HTML structure, 'styles' gets the full CSS cascade, 'screenshot' captures a visual snapshot, 'diff' compares styles before and after a change. Call with action 'help' if unsure.

Overview

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.

Frequently asked questions

1

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.

2

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.

3

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.

4

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

5

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.

Comments

More Browser Automation MCP servers

Nullprint

nullprintai

Let Claude Code, Claude Desktop, OpenAI Codex, Kimi and any MCP-capable AI agent create, launch, check and drive browser profiles in Nullprint, the AI antidetect browser. Install with one command.

Full Self Browsing

Lakshman Turlapati

DOM-first AI browser automation for Chrome and MCP clients.

194

Parse

Parse.bot

Parse allows your agent to access thousands of APIs instantly. You can use Parse to build an API for any action on any website and edit any previously existing API in our catalogue.

Browse Bridge

Share selected Chrome tabs with AI agents. You enable the tab you want to share and maintain the ability to instantly take control. Browse Bridge is a remote MCP server available at https://mcp.browsebridge.com. What c

Playwright Mcp

microsoft

Playwright MCP server

34.8K
Advertise