Web Element Inspector

What it does

This MCP app provides an interactive visual overlay for any website, allowing users to click on DOM elements to capture their precise technical specifications. It transforms the process of web analysis by bridging the gap between a visual browser and a LLM, sending raw element data (tags, styles, attributes) directly into the chat context.

Key features

• Visual Inspection: Click-to-inspect interface that highlights elements in real-time.
• Deep Metadata: Captures full CSS styles, computed positions, tag names, and attributes.
• Universal Compatibility: Works across local development servers and public production websites.
• Direct Integration: Single-click "Send to Claude" functionality to share element data for debugging or analysis.
• Session History: Maintains a log of inspected elements for batch analysis.

Installation

• Claude Desktop: Add the following to your claude_desktop_config.json:

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

Supported hosts

• Claude