mcp-pointer

MCP Pointer provides a local MCP server that exposes information about DOM elements selected in the browser via a Chrome extension. The server acts as the bridge between the browser’s element data and MCP-enabled AI tools (such as Claude Code, Cursor, Windsurf). To use it, first ensure the MCP Pointer server is installed (see installation steps), then start the server with the provided command. Once running, the server listens on port 7007 and serves MCP tools like get-pointed-element, which returns textual context about the currently pointed DOM element. In practice, you install the Chrome extension, install or configure the MCP Pointer server, and then you can select an element with Option+Click in the browser; your AI tool can query the server to retrieve element details (tag, id, classes, text, CSS properties, attributes, position, component hints, etc.) and use that information to reason about the page content. The workflow supports real-time updates through a WebSocket transport, enabling seamless integration with your agentic coding assistant. To use a particular tool (for example Claude Code), configure the server for that tool via the provided npx config commands, then restart your AI tool to load the MCP connection.

Prerequisites:

• Node.js (LTS) and npm installed on your system
• Optional: Chrome extension installed from the Chrome Web Store (or built locally)

Installation steps:

1. Install the MCP Pointer server (locally or via npx):

# Local install (recommended)
npm install -g @mcp-pointer/server

# Or use npx to run directly without global install
npx -y @mcp-pointer/server@latest

2. (Optional) Configure for your AI tool(s):

# Example for claude
npx -y @mcp-pointer/server config claude

# Other tools
npx -y @mcp-pointer/server config cursor
npx -y @mcp-pointer/server config windsurf

3. Start the MCP Pointer server:

# Start server (default command used in docs)
npx -y @mcp-pointer/server@latest start

4. Verify the server starts and is listening on port 7007. Ensure firewall rules allow traffic to that port if needed.

Tips and common notes:

• The MCP Pointer server communicates with the Chrome extension via WebSocket on port 7007; ensure this port is accessible from your development environment.
• After installing or changing tool configurations, restart your AI assistant so it can load the latest MCP connection.
• Use the config command to tailor how each tool consumes element data (e.g., adjusting textDetail and cssLevel equivalents via MCP calls).
• If you encounter extension connection issues, check that the MCP server is running, review browser console logs for WebSocket errors, and confirm the server is not blocked by a firewall.
• The npm package name for reference is @mcp-pointer/server. You can also run with npx for quick, ephemeral usage without global installation.