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
1<img width="1440" height="480" alt="MCP Pointer banner" src="https://github.com/user-attachments/assets/a36d2666-e848-4a80-97b3-466897b244f7" />23[](https://github.com/etsd-tech/mcp-pointer/actions/workflows/ci.yml)4[](https://github.com/etsd-tech/mcp-pointer/actions/workflows/release.yml)5[](https://www.npmjs.com/package/@mcp-pointer/server)6[](https://github.com/etsd-tech/mcp-pointer/releases)7[](https://github.com/etsd-tech/mcp-pointer/blob/main/LICENSE)89# 👆 MCP Pointer1011**Point to browser DOM elements for agentic coding tools via MCP!**1213MCP Pointer is a *local* tool combining an MCP Server with a Chrome Extension:14151. **🖥️ MCP Server** (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol162. **🌐 Chrome Extension** - Captures DOM element selections in the browser using `Option+Click`1718The 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.1920## ✨ Features2122- 🎯 **`Option+Click` Selection** - Simply hold `Option` (Alt on Windows) and click any element23- 📋 **Complete Element Data** - Text content, CSS classes, HTML attributes, positioning, and styling24- 💡 **Dynamic Context Control** - Request visible-only text, suppress text entirely, or dial CSS detail from none → full computed styles per MCP call25- ⚛️ **React Component Detection** - Component names and source files via Fiber (experimental)26- 🔗 **WebSocket Connection** - Real-time communication between browser and AI tools27- 🤖 **MCP Compatible** - Works with Claude Code and other MCP-enabled AI tools2829## 🎬 Usage example (video)3031https://github.com/user-attachments/assets/98c4adf6-1f05-4c9b-be41-0416ab784e2c3233See 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.3435## 🚀 Getting Started3637### 1. Install Chrome Extension3839**🎉 Now available on Chrome Web Store!**4041[](https://chromewebstore.google.com/detail/mcp-pointer/jfhgaembhafbffidedhpkmnaajdfeiok)4243Simply click the link above to install from the Chrome Web Store.4445<details>46<summary>Alternative: Manual Installation</summary>4748**Option A: Download from Releases**49501. Go to [GitHub Releases](https://github.com/etsd-tech/mcp-pointer/releases)512. Download `mcp-pointer-chrome-extension.zip` from the latest release523. Extract the zip file to a folder on your computer534. Open Chrome → Settings → Extensions → Developer mode (toggle ON)545. Click "Load unpacked" and select the extracted folder556. The MCP Pointer extension should appear in your extensions list567. **Reload web pages** to activate the extension5758**Option B: Build from Source**59601. Clone this repository612. Follow the build instructions in [CONTRIBUTING.md](./CONTRIBUTING.md)623. Open Chrome → Settings → Extensions → Developer mode (toggle ON)634. Click "Load unpacked" and select the `packages/chrome-extension/dist/` folder645. **Reload web pages** to activate the extension6566</details>6768### 2. Configure MCP Server6970One command setup for your AI tool:7172```bash73npx -y @mcp-pointer/server config claude # or cursor, windsurf, and others - see below74```7576<details>77<summary>Other AI Tools & Options</summary>7879```bash80# For other AI tools81npx -y @mcp-pointer/server config cursor # Opens Cursor deeplink for automatic installation82npx -y @mcp-pointer/server config windsurf # Automatically updates Windsurf config file83npx -y @mcp-pointer/server config manual # Shows manual configuration for other tools84```8586> **Optional:** You can install globally with `npm install -g @mcp-pointer/server` to use `mcp-pointer` instead of `npx -y @mcp-pointer/server`8788</details>8990After configuration, **restart your coding tool** to load the MCP connection.9192> **🔄 Already using MCP Pointer?** Run the config command again to update to auto-updating configuration:93> ```bash94> npx -y @mcp-pointer/server config <your-tool> # Reconfigures to always use latest version95> ```9697### 3. Start Using98991. **Navigate to any webpage**1002. **`Option+Click`** any element to select it1013. **Ask your AI** to analyze the targeted element!102103Your AI tool will automatically start the MCP server when needed using the `npx -y @mcp-pointer/server@latest start` command.104105**Available MCP Tool:**106- `get-pointed-element` – Returns textual information about the currently pointed DOM element. Optional arguments:107 - `textDetail`: `0 | 1 | 2` (default `2`) controls how much text to include (`0 = none`, `1 = visible text only`, `2 = visible + hidden`).108 - `cssLevel`: `0 | 1 | 2 | 3` (default `1`) controls styling detail, from no CSS (0) up to full computed styles (3).109110## 🎯 How It Works1111121. **Element Selection**: Content script captures `Option+Click` events1132. **Data Extraction**: Analyzes element structure, CSS, and framework info1143. **WebSocket Transport**: Sends data to MCP server on port 70071154. **MCP Protocol**: Makes data available to AI tools via MCP tools1165. **AI Analysis**: Your assistant can now see and analyze the element!117118## 🎨 Element Data Extracted119120- **Basic Info**: Tag name, ID, classes, text content121- **CSS Properties**: Display, position, colors, dimensions122- **Component Info**: React component names and source files (experimental)123- **Attributes**: All HTML attributes124- **Position**: Exact coordinates and dimensions125- **Source Hints**: File paths and component origins126127## 🔍 Framework Support128129- ⚛️ **React** - Component names and source files via Fiber (experimental)130- 📦 **Generic HTML/CSS/JS** - Full support for any web content131- 🔮 **Planned** - Vue component detection (PRs appreciated)132133## 🌐 Browser Support134135- ✅ **Chrome** - Full support (tested)136- 🟡 **Chromium-based browsers** - Should work (Edge, Brave, Arc - load built extension manually)137138## 🐛 Troubleshooting139140### Extension Not Connecting1411421. Make sure MCP server is running: `npx -y @mcp-pointer/server@latest start`1432. Check browser console for WebSocket errors1443. Verify port 7007 is not blocked by firewall145146### MCP Tools Not Available1471481. Restart your AI assistant after installing1492. Check MCP configuration: `mcp-pointer config <your-tool>`1503. Verify server is running: `npx -y @mcp-pointer/server@latest start`151152### Elements Not Highlighting1531541. Some pages block content scripts (chrome://, etc.)1552. Try refreshing the page1563. Check if targeting is enabled (click extension icon)157158## 🚀 Roadmap159160### 1. **Dynamic Context Control**161 - Full raw context transferred to server162 - LLM-configurable detail levels (visible text only, all text, CSS levels)163 - Progressive refinement options / token-conscious data fetching164165### 2. **Visual Content Support** (for multimodal LLMs)166 - Base64 encoding for images (img tags)167 - Screenshot capture of selected elements168 - Separate MCP tool for direct visual content retrieval169170### 3. **Enhanced Framework Support**171 - Vue.js component detection172 - Better React support (React 19 removed `_debugSource`, affecting source mapping in dev builds)173174### 4. **Multi Select**175 - Having the ability to select multiple DOM elements176 - https://github.com/etsd-tech/mcp-pointer/pull/9177178## 📝 License179180MIT License - see LICENSE file for details181182## 🤝 Contributing183184We welcome contributions! Please see our [CONTRIBUTING.md](./CONTRIBUTING.md) guide for development setup and guidelines.185186---187188*Inspired by tools like [Click-to-Component](https://github.com/ericclemmons/click-to-component) for component development workflows.*189190---191192**Made with ❤️ for AI-powered web development**193194*Now your AI can analyze any element you point at with `Option+Click`! 👆*195
Full transparency — inspect the skill content before installing.