MCP Pointer

MCP Pointer is a lightweight, local solution that bridges the gap between web browsers and agentic coding tools by exposing precise DOM element data through the Model Context Protocol. Developers often need to query or manipulate specific parts of a web page while working with AI assistants like Claude Code, Cursor, or Windsurf. Traditionally this required manual copy‑paste of HTML snippets or custom scripts; MCP Pointer automates the process, letting users simply Option+Click an element and immediately provide that context to their AI tool.

The system is split into two complementary components. A Node.js MCP server runs on the developer’s machine and maintains a WebSocket connection with the Chrome extension. The extension, installed from the Chrome Web Store or loaded manually, listens for the Option+Click gesture and captures comprehensive information about the clicked element: its text content, CSS classes, attributes, bounding rectangle, computed styles, and even the full selector path. For React applications it can (experimentally) identify the component name and source file via Fiber, giving AI assistants a deeper understanding of the underlying framework. All this data is serialized into an MCP tool payload and sent to the AI client in real time, enabling instant, context‑aware queries.

Key features include:

• Instant visual selection with a single keystroke and click.
• Rich contextual payloads that cover layout, styling, and source information.
• React component awareness, providing higher‑level semantic data for modern front‑end stacks.
• Zero‑configuration WebSocket bridge that works out of the box with any MCP‑enabled assistant.
• Cross‑platform support (Option on macOS, Alt on Windows/Linux).

Typical use cases are:

• Debugging – ask an AI assistant to explain why a button isn’t rendering correctly.
• Refactoring – request code changes for a specific component subtree without manually extracting the HTML.
• Documentation – generate accessible descriptions or test cases for selected elements.
• Rapid prototyping – quickly gather the exact markup and styles needed to build a new feature.

By integrating seamlessly into existing AI workflows, MCP Pointer eliminates the friction of manually transferring DOM data. Developers can focus on higher‑level design and logic while the server ensures that every element they interact with is fully described to their agentic partner. This tight coupling of visual selection and protocol‑based communication gives MCP Pointer a distinct edge over ad‑hoc tooling or manual data extraction.