SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI codingmcp-pointer

mcp-pointer

Visual DOM element selector for coding agents: a Chrome extension and server bridge to capture page elements with Option+Click.

Open website

About this tool

Purpose

MCP Pointer is used to let agentic coding tools "see" the DOM element you point to in the browser. It combines an MCP server with a Chrome extension into a local tool: the extension is responsible for capturing DOM element selections in the browser, and the MCP server provides the captured text context through the Model Context Protocol (MCP) to MCP-compatible AI coding tools such as Claude Code, Cursor, and Windsurf.

Main capabilities

  • Option+Click selection: Hold Option (Alt on Windows) and click any element to select it.
  • Complete element data: Text content, CSS classes, HTML attributes, positioning and styles.
  • Dynamic context control: You can request visible text only, fully suppress text, or adjust CSS detail level (from none to fully computed styles) per MCP call.
  • React component detection: Get component names and source files via Fiber (experimental).
  • WebSocket connection: Real-time communication between the browser and AI tools.
  • MCP compatible: Can be used with Claude Code and other MCP-compatible AI tools.

How to use

1. Install the Chrome extension

You can install it from the Chrome Web Store; you can also download mcp-pointer-chrome-extension.zip from GitHub Releases, unzip it, then in Chrome → Settings → Extensions → enable Developer mode → click "Load unpacked" and select the unzipped folder; you can also build from source, see CONTRIBUTING.md, then load the packages/chrome-extension/dist/ folder. After installation, reload the webpage to activate the extension.

2. Configure the MCP server

Provide one command to the AI tool to complete the configuration. Optional: use npm install -g @mcp-pointer/server to install globally, so you can use mcp-pointer instead of npx -y @mcp-pointer/server. After configuration, restart the coding tool to load the MCP connection. Already using MCP Pointer users, running the configuration command again can update to the automatic update configuration.

3. Usage Flow

Browse any web page, Option+Click to select an element, and ask the AI to analyze the selected element. The AI tool will automatically start the MCP server as needed via npx -y @mcp-pointer/server@latest start.

Available MCP Tools

  • get-pointed-element: Returns text information about the currently pointed DOM element. Optional parameters:
    • textDetail: 0 | 1 | 2 (default 2), controls how much text is included (0 = none, 1 = visible text only, 2 = visible + hidden).
    • cssLevel: 0 | 1 | 2 | 3 (default 1), controls the level of style detail, from no CSS (0) to full computed styles (3).

How It Works

  1. Element selection: The content script captures the Option+Click event.
  2. Data extraction: Analyzes the element structure, CSS, and framework information.
  3. WebSocket transmission: Sends the data to the MCP server on port 7007.
  4. MCP protocol: Provides the data to the AI tool via the MCP tool.
  5. AI analysis: The assistant can then view and analyze the element.

Extracted Element Data

  • Basic information: tag name, ID, class, text content
  • CSS properties: display, position, color, dimensions
  • Component information: React component name and source file (experimental)
  • Attributes: all HTML attributes
  • Position: exact coordinates and dimensions
  • Source hints: file path and component source

Use Cases

Suitable for front-end development and debugging: visually locate elements in the browser, then have the agentic coding tool analyze their structure, styles, or component source, thereby assisting with code modifications. It can also be used in component development workflows.

Framework and Browser Support

  • Frameworks: React (component name and source file obtained via Fiber, experimental); full support for general HTML/CSS/JS; Vue component detection is planned (PRs welcome).
  • Browsers: Full support for Chrome (tested); Chromium-based browsers (Edge, Brave, Arc) should work, requiring manual loading of the built extension.

Limitationsand Troubleshooting

  • Some pages block content scripts (such as chrome://, etc.).
  • Extension not connected: Confirm the server is running (npx -y @mcp-pointer/server@latest start); check the browser console for WebSocket errors; confirm port 7007 is not blocked by a firewall.
  • MCP tool unavailable: Restart the AI assistant after installation; check the MCP configuration (mcp-pointer config <your tool>); confirm the server is running.
  • Element not highlighted: Try refreshing the page; check whether target selection is enabled (click the extension icon).

Roadmap

  • Dynamic context control (already supported): Full raw context passed to the server, LLM-configurable detail level, progressive refinement options / token-conscious data fetching.
  • Visual content support (for multimodal LLMs): Base64 encoding of images (img tags), screenshots of the selected element, a standalone MCP tool for directly fetching visual content.
  • Enhanced framework support: Vue.js component detection; improved React support (React 19 removed _debugSource, affecting source mapping in development builds).
  • Multi-select: Support selecting multiple DOM elements.

License and Contributions

MIT License, see the LICENSE file for details. Contributions are welcome; see CONTRIBUTING.md for development setup and guidelines. The tool is inspired by component development workflow tools such as Click-to-Component.

Related tools

Browse category