<div align="center">

DOM Inspector Plus — MCP Server

Give Claude the power to inspect and extract UI components from any webpage.

Connect the DOM Inspector Plus Chrome extension to Claude as an MCP connector.

</div>

---

What This Does

This MCP server lets Claude directly interact with webpages through the DOM Inspector Plus Chrome extension. Instead of you manually inspecting and copying, Claude can:

• Find elements on a page by CSS selector
• Extract full component trees with styles, Tailwind classes, and accessibility info
• Capture interaction states (hover, focus, active) to see what changes
• Extract design tokens (colors, typography, spacing) from any page
• Get page structure overviews to understand the DOM layout

Setup

1. Install the Chrome extension

Install DOM Inspector Plus in Chrome.

2. Install the MCP server

git clone https://github.com/Sreelal727/dom-inspector-plus-mcp.git
cd dom-inspector-plus-mcp
npm install
npm run build

3. Add to Claude Desktop

Add this to your claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "dom-inspector-plus": {
      "command": "node",
      "args": ["/path/to/dom-inspector-plus-mcp/dist/index.js"],
      "type": "stdio"
    }
  }
}

4. Restart Claude Desktop

The "DOM Inspector Plus" connector should appear in Connectors.

Available Tools

Tool	Description
get_inspector_status	Check if the extension is connected and get current page info
start_inspector	Activate visual inspection mode on the page
stop_inspector	Deactivate the inspector overlay
extract_element	Extract a component by CSS selector with full styles and Tailwind classes
get_extraction	Get the latest user-clicked extraction in any format (AI prompt, JSX, HTML, Tailwind, JSON)
extract_design_tokens	Scan the page for colors, typography, spacing, shadows
get_page_structure	Get a high-level DOM overview of the page
capture_interaction_state	Capture hover/focus/active style changes on an element
find_elements	Find elements matching a CSS selector

Example Usage

Ask Claude:

"Look at the pricing section on this page and extract the card component with all its styles"

Claude will use the tools to find the pricing section, extract it, and return a structured prompt or React component you can use directly.

How It Works

Claude ←→ MCP Server (stdio) ←→ HTTP Bridge (localhost:18432) ←→ Chrome Extension (content script)

The MCP server runs a small HTTP bridge on localhost:18432. The Chrome extension's content script polls this bridge for commands and sends back results. All communication stays local — nothing is sent to external servers.

License

MIT