Browser Inspector Mcp

Created By

betson-uni8 days ago

Gives AI coding tools the same CSS visibility you have in browser DevTools. Inspect the real rendered DOM, full CSS cascade, before/after style diffs, and element screenshots — all from your AI session. Zero setup, works via npx.

# css

# devtools

Overview Content Tools Comments

Overview

Before your AI writes CSS, let it see what's actually in the browser.

AI reads source files. Browsers render something different. Component libraries like Ant Design, Material UI, and Radix generate class names at runtime that don't exist in your source. This tool closes that gap.

One tool, four actions:

dom — real rendered HTML and class names before writing any CSS
styles — full CSS cascade, every matched rule, where it came from, which rule won
diff — before/after comparison to confirm a CSS change actually landed
screenshot — cropped visual snapshot of any element, returned inline

Zero setup. No flags, no extension, no configuration. Add to your MCP config and restart.

Server Config

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

Recommend Servers

TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.

WindsurfThe new purpose-built IDE to harness magic

Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.

Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.

Tavily Mcp

BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.

CursorThe AI Code Editor

AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.

Baidu Map百度地图核心API现已全面兼容MCP协议，是国内首家兼容MCP协议的地图服务商。

Serper MCP ServerA Serper MCP Server

MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs