element-inspector

Web Element Inspector MCP Server

A general-purpose MCP server that provides an interactive element inspector for ANY website. Perfect for analyzing web pages, debugging UI issues, examining competitors' designs, or understanding how any website is built. Click on elements and instantly send detailed information about them to Claude.

Features

• 🔍 Interactive Element Inspection: Click on any element on any website
• 🌐 Universal Support: Works with local dev servers, production sites, and external websites
• 📊 Detailed Element Data: Captures tag name, ID, classes, attributes, styles, position, and text content
• 💬 Direct Claude Integration: Send element information directly to Claude via app.sendMessage()
• 🎯 Real-time Feedback: Visual highlighting and instant status updates
• 📝 Inspection History: Keep track of all inspected elements during a session
• 🔄 Batch Operations: Send individual elements or entire history to Claude
• 🛡️ Smart Attribute Detection: Highlights important attributes like href, src, aria-label, etc.

How It Works

1. Launch the Inspector: Call the inspect-web-elements tool with any website URL
2. Enable Inspection: Click the "Enable Element Inspection" button
3. Click Elements: Click on any element in the loaded page
4. Send to Claude: Use "Send to Claude" to instantly share element data

Installation

1. Install Dependencies

cd ~/ai-agent/element-inspector-mcp
npm install

2. Build the Project

npm run build

3. Configure Claude Desktop

Add this to your Claude Desktop config file:

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

{
  "mcpServers": {
    "element-inspector": {
      "command": "node",
      "args": [
        "/data/data/com.termux/files/home/ai-agent/element-inspector-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

Usage

Basic Usage

1. Start your development server (e.g., npm run dev on port 3000) or navigate to any website
2. In Claude Desktop, ask: "Launch the element inspector for https://example.com"
3. The inspector UI will appear in the chat
4. Click "Enable Element Inspection"
5. Click on any element in the loaded page
6. Click "Send to Claude" to share the element information

Example Prompts

• "Launch the element inspector for my dev server at http://localhost:3000"
• "Inspect the navigation bar on https://github.com"
• "Analyze the header structure of https://example.com"
• "Click on the main CTA button on https://www.producthunt.com and tell me about its styling"
• "Examine the pricing table on https://stripe.com and send the details to me"

Advanced Usage

The inspector captures comprehensive element data:

{
  "tagName": "button",
  "id": "submit-btn",
  "classes": ["btn", "btn-primary"],
  "text": "Submit",
  "attributes": {
    "type": "submit",
    "disabled": "false"
  },
  "styles": {
    "display": "inline-block",
    "padding": "10px 20px",
    "backgroundColor": "rgb(33, 150, 243)"
  },
  "position": {
    "x": 100,
    "y": 200,
    "width": 150,
    "height": 40
  }
}

Development

Project Structure

element-inspector-mcp/
├── src/
│   ├── mcp-app.ts      # Client-side application
│   ├── index.html       # HTML template
│   └── styles.css       # Application styles
├── server.ts            # MCP server with tool registration
├── index.ts             # Entry point
├── vite.config.ts       # Vite configuration
└── package.json

Building

npm run build

Running Locally (for testing)

npm run build
node dist/index.js --stdio

Technical Details

• Uses MCP Apps SDK for interactive UI
• Built with TypeScript and Vite
• Single-file bundle for easy distribution
• Safe iframe sandboxing
• CORS-aware element inspection

Use Cases

• Development: Debug UI issues in your local development environment
• Competitor Analysis: Examine how competitors structure their websites
• Learning: Study the HTML/CSS of well-designed websites
• Accessibility Testing: Check ARIA labels and semantic structure
• SEO Analysis: Examine meta tags, headings, and semantic HTML
• Design Inspiration: Capture styling details from impressive websites
• Content Strategy: Analyze how successful sites structure their content

Limitations

• CORS Restrictions: Some websites may block iframe embedding (X-Frame-Options)
• Same-Origin Policy: Cross-origin access may be limited on some sites
• Dynamic Content: Very dynamic content (SPAs) may require re-enabling inspection
• Authentication: Logged-in pages may not work in iframes
• Complex CSP Sites: Sites with strict Content Security Policies may block interaction

Troubleshooting

"Cannot access iframe content" error

This occurs when websites block iframe embedding. Solutions:

1. For local development: Add CORS headers to your dev server
2. For external sites: The site may have X-Frame-Options or CSP restrictions
3. Workaround: Try using a CORS proxy or browser extension
4. Alternative: Use browser DevTools with MCP for problematic sites

Elements not highlighting

• Ensure inspection mode is enabled (button should be green and pulsing)
• Check that the page has fully loaded
• For SPAs, try toggling inspection mode off and on
• Some sites with complex event handling may interfere

"Site may block iframe embedding" warning

This is normal for external websites. Many sites have security policies that prevent iframe embedding. This doesn't affect the inspector's functionality - it's just a warning that some sites may not load in iframes.

Tips for Best Results

1. Local Development: Always use http://localhost:3000 or similar for best results
2. Simple Pages: Static sites work better than complex SPAs
3. Public URLs: Use public URLs rather than authenticated pages
4. Stable Content: Choose pages with stable content for reliable inspection
5. Large Elements: Click on larger elements for more accurate selection

Future Enhancements

• [ ] CSS selector generation and copying
• [ ] Screenshot capture integration
• [ ] Network request monitoring
• [ ] Console log inspection
• [ ] Multiple element selection
• [ ] Element tree visualization
• [ ] Export inspection data as JSON
• [ ] Integration with browser DevTools protocol

License

MIT

Contributing

Contributions welcome! Feel free to open issues or pull requests.