MCP Pointer

Example Use Cases

• 1

  Precise textual and structural context about a specific DOM element (text content, attributes, classes) to generate or modify code related to that element.

• 2

  CSS and layout details (styles, dimensions, position) to suggest visual changes, debugging steps, or generate style rules.

• 3

  Framework-level hints (experimental React component names and source file hints) to map UI elements to component code for targeted refactors or explanations.

Description

MCP Pointer combines a Node.js MCP server with a Chrome extension so you can Option+Click any element in the browser and make its textual/contextual data available to agentic coding assistants. The extension extracts element text, attributes, CSS, positioning, and experimental React component info and streams it over WebSocket to the local MCP server (default port 7007). The server exposes an MCP tool (get-pointed-element) so tools like Claude Code, Cursor, and Windsurf can query the selected element in real time. Because it runs locally and uses WebSocket/MCP, it is suitable for private, interactive developer workflows.

Capabilities(1 total)