What is Mcp Browser Inspector

MCP-Browser-Inspector is a Model Context Protocol (MCP) tool designed for inspecting and modifying web elements, offering responsive testing capabilities and interactive messaging features.

Use cases

Use cases include testing website responsiveness, inspecting specific web elements for debugging, modifying elements in real-time during development, and communicating changes through interactive messages.

How to use

To use MCP-Browser-Inspector, install it globally or locally via npm. Then, configure it in your MCP settings file and use it in conversations with Claude to launch a browser for inspection.

Key features

Key features include a floating UI for easy access, an interactive toolbar for element selection, visual feedback for element highlighting, responsive testing across different device resolutions, and the ability to submit modification requests in real-time.

Where to use

MCP-Browser-Inspector can be used in web development, quality assurance, and user experience testing, providing tools for developers and testers to inspect and modify web elements effectively.

MCP Browser Inspector

A Model Context Protocol (MCP) tool for inspecting and modifying web elements with responsive testing capabilities and interactive messaging.

Features

• Floating UI: Convenient floating icon in the bottom-right corner that stays visible on all pages
• Interactive Toolbar: Expandable toolbar with action buttons for element selection and resolution changes
• Element Selection: Easily select and inspect any element on a webpage with visual highlighting
• Visual Feedback: Elements highlight in red when hovering and turn green when selected
• Message Communication: Send messages about selected elements through an interactive dialog
• Responsive Testing: Test your website at different device resolutions with a fully resizable browser
• Element Information: View detailed information about selected elements (HTML, CSS) and associated messages
• Modification Requests: Submit requests to modify selected elements in real-time
• Toggle Mode: Switch between browsing and selection modes with clear visual indicators

Installation

# Install globally
npm install -g mcp-browser-inspector

# Or install locally
npm install mcp-browser-inspector

Usage with Claude

Add to your MCP settings file:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "node",
      "args": [
        "/path/to/node_modules/mcp-browser-inspector/build/index.js"
      ],
      "disabled": false,
      "autoApprove": []
    }
  }
}

Then in your conversation with Claude:

Use the browser-inspector MCP tool to launch a browser at http://example.com

Documentation

For full documentation, visit the GitHub repository.

License

MIT