MCP Pointer is a local development tool that bridges browser DOM context to MCP-enabled AI coding assistants like Claude Code, Cursor, and Windsurf. It consists of a Chrome Extension paired with an MCP Server that captures detailed element information through Option+Click (Alt+Click on Windows). Key features: - Capture DOM element snapshots with one click — text content, CSS classes, HTML attributes, positioning, and computed styles - Dynamic context filtering — request visible-only text, suppress text entirely, or adjust CSS detail level per MCP call - React component detection via Fiber — surface component names and source files (experimental) - WebSocket-based real-time communication between the browser and AI tools - Works alongside any MCP-compatible client to provide contextual information about specific web page elements during coding sessions

[](https://github.com/etsd-tech/mcp-pointer/actions/workflows/ci.yml) [](https://github.com/etsd-tech/mcp-pointer/actions/workflows/release.yml) [](https://www.npmjs.com/package/@mcp-pointer/server) [](https://github.com/etsd-tech/mcp-pointer/releases) [](https://github.com/etsd-tech/mcp-pointer/blob/main/LICENSE)

👆 MCP Pointer

Point to browser DOM elements for agentic coding tools via MCP!

MCP Pointer is a *local* tool combining an MCP Server with a Chrome Extension:

1. 🖥️ MCP Server (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol 2. 🌐 Chrome Extension - Captures DOM element selections in the browser using Option+Click

The extension lets you visually select DOM elements in the browser, and the MCP server makes this textual context available to agentic coding tools like Claude Code, Cursor, and Windsurf through standardized MCP tools.

✨ Features

🎬 Usage example (video)

https://github.com/user-attachments/assets/98c4adf6-1f05-4c9b-be41-0416ab784e2c

See MCP Pointer in action: Option+Click any element in your browser, then ask your agentic coding tool about it (in this example, Claude Code). The AI gets complete textual context about the selected DOM element including CSS properties, url, selector, and more.

🚀 Getting Started

1. Install Chrome Extension

🎉 Now available on Chrome Web Store!

[](https://chromewebstore.google.com/detail/mcp-pointer/jfhgaembhafbffidedhpkmnaajdfeiok)

Simply click the link above to install from the Chrome Web Store.

Alternative: Manual Installation

Option A: Download from Releases

1. Go to GitHub Releases 2. Download mcp-pointer-chrome-extension.zip from the latest release 3. Extract the zip file to a folder on your computer 4. Open Chrome → Settings → Extensions → Developer mode (toggle ON) 5. Click "Load unpacked" and select the extracted folder 6. The MCP Pointer extension should appear in your extensions list 7. Reload web pages to activate the extension

Option B: Build from Source

1. Clone this repository 2. Follow the build instructions in CONTRIBUTING.md 3. Open Chrome → Settings → Extensions → Developer mode (toggle ON) 4. Click "Load unpacked" and select the packages/chrome-extension/dist/ folder 5. Reload web pages to activate the extension

2. Configure MCP Server

One command setup for your AI tool:

npx -y @mcp-pointer/server config claude  # or cursor, windsurf, and others - see below

Other AI Tools & Options

# For other AI tools
npx -y @mcp-pointer/server config cursor     # Opens Cursor deeplink for automatic installation
npx -y @mcp-pointer/server config windsurf   # Automatically updates Windsurf config file
npx -y @mcp-pointer/server config manual     # Shows manual configuration for other tools

> Optional: You can install globally with npm install -g @mcp-pointer/server to use mcp-pointer instead of npx -y @mcp-pointer/server

After configuration, restart your coding tool to load the MCP connection.

> 🔄 Already using MCP Pointer? Run the config command again to update to auto-updating configuration: >

> npx -y @mcp-pointer/server config   # Reconfigures to always use latest version
> 

3. Start Using

1. Navigate to any webpage 2. Option+Click any element to select it 3. Ask your AI to analyze the targeted element!

Your