<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](https://github.com/Sreelal727/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](https://github.com/Sreelal727/dom-inspector-plus) in Chrome.

### 2. Install the MCP server

```bash
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`

```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