👆 MCP Pointer

Point to browser DOM elements for agentic coding tools via MCP!

MCP Pointer is a local tool combining an MCP Server with a Chrome Extension:

1. 🖥️ MCP Server (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol
2. 🌐 Chrome Extension - Captures DOM element selections in the browser using Option+Click

The extension lets you visually select DOM elements in the browser, and the MCP server makes this textual context available to agentic coding tools like Claude Code, Cursor, and Windsurf through standardized MCP tools.

✨ Features

• 🎯 Option+Click Selection - Simply hold Option (Alt on Windows) and click any element
• 📋 Complete Element Data - Text content, CSS classes, positioning, and aggregated CSS rules for the selected subtree
• ⚛️ React Component Detection - Component names and source files via Fiber (experimental)
• 🔗 WebSocket Connection - Real-time communication between browser and AI tools
• 🤖 MCP Compatible - Works with Claude Code and other MCP-enabled AI tools
• 🔄 Multiple Element Selection - Select multiple elements in sequence with visual feedback
• 🖱️ Middle Click Selection - Use Option+Middle Click to avoid triggering element actions

🎬 Usage example (video)

mcp-pointer-demo.mp4

See MCP Pointer in action: Option+Click any element in your browser, then ask your agentic coding tool about it (in this example, Claude Code). The AI gets complete textual context about the selected DOM element including CSS properties, url, selector, and more.

🔄 Multiple Element Selection

MCP Pointer now supports selecting multiple DOM elements in sequence! This feature allows you to build a collection of related elements for comprehensive analysis.

How to Use

1. Enable targeting mode by pressing your trigger key (default varies by system)
2. Select first element: Option+Middle Click on any element
3. Select additional elements: Continue Option+Middle Click on other elements
4. Deselect elements: Option+Middle Click the same element again to remove it from selection
5. View selection: All selected elements are highlighted with visual overlays

Key Features

• Sequential Selection: Elements are numbered in selection order (1, 2, 3...)
• Visual Feedback: Selected elements show distinctive highlighting with position indicators
• Clean Interaction: Uses middle mouse button to avoid triggering element click events
• Dynamic Updates: Selection indexes automatically update when elements are added/removed
• Complete Data: All selected elements are sent together to your AI tool for analysis

Technical Details

• Selection Method: Option+Middle Click (prevents accidental element triggering)
• Index Display: Sequential numbering with high contrast visibility
• Event Handling: Prevents default click behavior to avoid unwanted page interactions
• Data Structure: Maintains array of selected elements with proper ordering

🚀 Getting Started

1. Install Chrome Extension

🎉 Now available on Chrome Web Store!

Simply click the link above to install from the Chrome Web Store.

Alternative: Manual Installation

Option A: Download from Releases

1. Go to GitHub Releases
2. Download mcp-pointer-chrome-extension.zip from the latest release
3. Extract the zip file to a folder on your computer
4. Open Chrome → Settings → Extensions → Developer mode (toggle ON)
5. Click "Load unpacked" and select the extracted folder
6. The MCP Pointer extension should appear in your extensions list
7. Reload web pages to activate the extension

Option B: Build from Source

1. Clone this repository
2. Follow the build instructions in CONTRIBUTING.md
3. Open Chrome → Settings → Extensions → Developer mode (toggle ON)
4. Click "Load unpacked" and select the packages/chrome-extension/dist/ folder
5. Reload web pages to activate the extension

2. Configure MCP Server

One command setup for your AI tool:

npx -y @mcp-pointer/server config claude  # or cursor, windsurf, and others - see below

Other AI Tools & Options

# For other AI tools
npx -y @mcp-pointer/server config cursor     # Opens Cursor deeplink for automatic installation
npx -y @mcp-pointer/server config windsurf   # Automatically updates Windsurf config file
npx -y @mcp-pointer/server config manual     # Shows manual configuration for other tools

Optional: You can install globally with npm install -g @mcp-pointer/server to use mcp-pointer instead of npx -y @mcp-pointer/server

After configuration, restart your coding tool to load the MCP connection.

3. Start Using

1. Navigate to any webpage
2. Option+Middle Click any element to select it (middle click prevents triggering element actions)
3. Ask your AI to analyze the targeted element!

Your AI tool will automatically start the MCP server when needed using the npx -y @mcp-pointer/server start command.

Available MCP Tool:

• get-pointed-element - Get textual information about the currently pointed DOM element from the browser extension

🎯 How It Works

1. Element Selection: Content script captures Option+Middle Click events
2. Data Extraction: Analyzes element structure, CSS, and framework info
3. WebSocket Transport: Sends data to MCP server on port 7007
4. MCP Protocol: Makes data available to AI tools via MCP tools
5. AI Analysis: Your assistant can now see and analyze the element!

🎨 Element Data Extracted

• Basic Info: Tag name, ID, classes, text content
• CSS 规则: 原始 CSS 文本，覆盖选中元素及其子元素的所有类选择器
• Component Info: React component names and source files (experimental)
• Position: Exact coordinates and dimensions
• Source Hints: File paths and component origins

🔍 Framework Support

• ⚛️ React - Component names and source files via Fiber (experimental)
• 📦 Generic HTML/CSS/JS - Full support for any web content
• 🔮 Planned - Vue component detection (PRs appreciated)

🌐 Browser Support

• ✅ Chrome - Full support (tested)
• 🟡 Chromium-based browsers - Should work (Edge, Brave, Arc - load built extension manually)

🐛 Troubleshooting

Extension Not Connecting

1. Make sure MCP server is running: npx -y @mcp-pointer/server start
2. Check browser console for WebSocket errors
3. Verify port 7007 is not blocked by firewall

MCP Tools Not Available

1. Restart your AI assistant after installing
2. Check MCP configuration: mcp-pointer config <your-tool>
3. Verify server is running: npx -y @mcp-pointer/server start

Elements Not Highlighting

1. Some pages block content scripts (chrome://, etc.)
2. Try refreshing the page
3. Check if targeting is enabled (click extension icon)

🚀 Roadmap

1. Dynamic Context Control

• LLM-configurable detail levels (visible text only, all text, CSS levels)
• Progressive refinement options
• Token-conscious data fetching

2. Enhanced Framework Support

• Vue.js component detection
• Better React support (React 19 removed _debugSource, affecting source mapping in dev builds)

3. Visual Content Support (for multimodal LLMs)

• Base64 encoding for images (img tags)
• Screenshot capture of selected elements
• Separate MCP tool for direct visual content retrieval

📝 License

MIT License - see LICENSE file for details

🤝 Contributing

We welcome contributions! Please see our CONTRIBUTING.md guide for development setup and guidelines.

---

Inspired by tools like Click-to-Component for component development workflows.

---

Made with ❤️ for AI-powered web development

Now your AI can analyze any element you point at with Option+Middle Click! 👆