This project provides a bridge between browser DOM elements and AI coding tools, enabling AI agents to understand and interact with web content contextually. It targets developers using agentic coding assistants like Claude Code, Cursor, and Windsurf, offering a significant benefit by allowing AI to analyze specific elements users point to on any webpage.

How It Works

MCP Pointer combines a Node.js-based MCP Server with a Chrome Extension. The extension captures DOM element selections via an "Option+Click" gesture. It extracts comprehensive data including text content, CSS properties, HTML attributes, positioning, and styling. An experimental feature attempts to detect React component names and source files using Fiber. Data is transmitted in real-time via a WebSocket connection to the MCP server, which then exposes it to AI tools through the Model Context Protocol (MCP).

Quick Start & Requirements

• Installation: Install the Chrome Extension from the Chrome Web Store or manually load it unpacked from a downloaded release zip or by building from source. Reload web pages to activate.
• MCP Server Configuration: Use npx -y @mcp-pointer/server config <tool> (e.g., claude, cursor, windsurf) to configure the server for specific AI tools. Restart your AI coding tool after configuration. The server can be started automatically by the AI tool or manually with npx -y @mcp-pointer/server start.
• Prerequisites: A modern Chrome or Chromium-based browser and Node.js for the MCP Server.

Highlighted Details

• Intuitive "Option+Click" DOM element selection.
• Rich element data extraction: text, CSS, attributes, positioning, styling.
• Experimental React component detection via Fiber.
• Real-time data transfer via WebSocket.
• MCP compatibility with popular AI coding tools.

Maintenance & Community

The project welcomes contributions via its CONTRIBUTING.md guide. The roadmap indicates plans for dynamic context control, enhanced framework support (including Vue and improved React 19 compatibility), and visual content support for multimodal LLMs. No specific community channels or contributor details were provided in the README.

Licensing & Compatibility

The project is released under the MIT License, which is permissive and generally suitable for commercial use and integration with closed-source applications.

Limitations & Caveats

React component detection is explicitly marked as experimental. Certain browser pages (e.g., chrome:// URLs) may block content scripts. The project's roadmap acknowledges potential challenges with future React versions impacting source mapping.