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
Add this skill
npx mdskills install etsd-tech/mcp-pointerBridges browser DOM inspection to AI tools with Option+Click selection and detailed element data
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:
Option+ClickThe 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.
Option+Click Selection - Simply hold Option (Alt on Windows) and click any elementhttps://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.
🎉 Now available on Chrome Web Store!
Simply click the link above to install from the Chrome Web Store.
Alternative: Manual Installation
Option A: Download from Releases
mcp-pointer-chrome-extension.zip from the latest releaseOption B: Build from Source
packages/chrome-extension/dist/ folderOne 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/serverto usemcp-pointerinstead ofnpx -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
Option+Click any element to select itYour AI tool will automatically start the MCP server when needed using the npx -y @mcp-pointer/server@latest start command.
Available MCP Tool:
get-pointed-element – Returns textual information about the currently pointed DOM element. Optional arguments:
textDetail: 0 | 1 | 2 (default 2) controls how much text to include (0 = none, 1 = visible text only, 2 = visible + hidden).cssLevel: 0 | 1 | 2 | 3 (default 1) controls styling detail, from no CSS (0) up to full computed styles (3).Option+Click eventsnpx -y @mcp-pointer/server@latest startmcp-pointer config npx -y @mcp-pointer/server@latest start_debugSource, affecting source mapping in dev builds)MIT License - see LICENSE file for details
We welcome contributions! Please see our CONTRIBUTING.md guide for development setup and guidelines.
Inspired by tools like Click-to-Component for component development workflows.
Made with ❤️ for AI-powered web development
Now your AI can analyze any element you point at with Option+Click! 👆
Install via CLI
npx mdskills install etsd-tech/mcp-pointerMCP Pointer is a free, open-source AI agent skill. 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
Install MCP Pointer with a single command:
npx mdskills install etsd-tech/mcp-pointerThis downloads the skill files into your project and your AI agent picks them up automatically.
MCP Pointer works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Gemini Cli, Amp, Roo Code, Goose. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.