mcp-pointer
starsforks
How to install mcp-pointer?
etsd-tech/mcp-pointer
$git clone https://github.com/etsd-tech/mcp-pointerPoint to browser DOM elements for agentic coding tools via MCP!
README.md
| 1 | <img width="1440" height="480" alt="MCP Pointer banner" src="https://github.com/user-attachments/assets/a36d2666-e848-4a80-97b3-466897b244f7" /> |
| 2 | |
| 3 | [](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) |
| 8 | |
| 9 | # 👆 MCP Pointer |
| 10 | |
| 11 | **Point to browser DOM elements for agentic coding tools via MCP!** |
| 12 | |
| 13 | MCP Pointer is a *local* tool combining an MCP Server with a Chrome Extension: |
| 14 | |
| 15 | 1. **🖥️ MCP Server** (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol |
| 16 | 2. **🌐 Chrome Extension** - Captures DOM element selections in the browser using `Option+Click` |
| 17 | |
| 18 | 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. |
| 19 | |
| 20 | ## ✨ Features |
| 21 | |
| 22 | - 🎯 **`Option+Click` Selection** - Simply hold `Option` (Alt on Windows) and click any element |
| 23 | - 📋 **Complete Element Data** - Text content, CSS classes, HTML attributes, positioning, and styling |
| 24 | - 💡 **Dynamic Context Control** - Request visible-only text, suppress text entirely, or dial CSS detail from none → full computed styles per MCP call |
| 25 | - ⚛️ **React Component Detection** - Component names and source files via Fiber (experimental) |
| 26 | - 🔗 **WebSocket Connection** - Real-time communication between browser and AI tools |
| 27 | - 🤖 **MCP Compatible** - Works with Claude Code and other MCP-enabled AI tools |
| 28 | |
| 29 | ## 🎬 Usage example (video) |
| 30 | |
| 31 | https://github.com/user-attachments/assets/98c4adf6-1f05-4c9b-be41-0416ab784e2c |
| 32 | |
| 33 | 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. |
| 34 | |
| 35 | ## 🚀 Getting Started |
| 36 | |
| 37 | ### 1. Install Chrome Extension |
| 38 | |
| 39 | **🎉 Now available on Chrome Web Store!** |
| 40 | |
| 41 | [](https://chromewebstore.google.com/detail/mcp-pointer/jfhgaembhafbffidedhpkmnaajdfeiok) |
| 42 | |
| 43 | Simply click the link above to install from the Chrome Web Store. |
| 44 | |
| 45 | <details> |
| 46 | <summary>Alternative: Manual Installation</summary> |
| 47 | |
| 48 | **Option A: Download from Releases** |
| 49 | |
| 50 | 1. Go to [GitHub Releases](https://github.com/etsd-tech/mcp-pointer/releases) |
| 51 | 2. Download `mcp-pointer-chrome-extension.zip` from the latest release |
| 52 | 3. Extract the zip file to a folder on your computer |
| 53 | 4. Open Chrome → Settings → Extensions → Developer mode (toggle ON) |
| 54 | 5. Click "Load unpacked" and select the extracted folder |
| 55 | 6. The MCP Pointer extension should appear in your extensions list |
| 56 | 7. **Reload web pages** to activate the extension |
| 57 | |
| 58 | **Option B: Build from Source** |
| 59 | |
| 60 | 1. Clone this repository |
| 61 | 2. Follow the build instructions in [CONTRIBUTING.md](./CONTRIBUTING.md) |
| 62 | 3. Open Chrome → Settings → Extensions → Developer mode (toggle ON) |
| 63 | 4. Click "Load unpacked" and select the `packages/chrome-extension/dist/` folder |
| 64 | 5. **Reload web pages** to activate the extension |
| 65 | |
| 66 | </details> |
| 67 | |
| 68 | ### 2. Configure MCP Server |
| 69 | |
| 70 | One command setup for your AI tool: |
| 71 | |
| 72 | ```bash |
| 73 | npx -y @mcp-pointer/server config claude # or cursor, |
People who liked this also viewed
6 picksType
- playwright-mcpPlaywright MCP fork that works with Cloudflare Browser RenderingMCP ServersApr 2026
- Playwright MCPBrowser automation for agents via accessibility snapshotsMCP Servers6 days ago
- chrome-devtools-mcpChrome DevTools for coding agentsMCP ServersJul 2026
- browser-operator-coreBrowser Operator - The AI browser with built in Multi-Agent platform! Open source alternative to ChatGPT Atlas, Perplexity Comet, Dia and Microsoft CoPilot Edge BrowserMCP ServersMar 2026
- fetcher-mcpMCP server for fetch web page content using Playwright headless browser.MCP ServersJan 2026
- mcpBrowser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browserMCP ServersApr 2025
