MCP Pointer
Point at browser DOM elements with Option+Click and feed them as context to agentic coding tools via MCP.
Add to your client
Copy the config for your MCP client and paste it into its config file.
npx -y @mcp-pointer/server config claudePaste into ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": [
"-y",
"@mcp-pointer/server@latest",
"start"
],
"env": {
"MCP_POINTER_PORT": "7007"
}
}
}
}Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf
Before you start
- Node.js (server runs via npx)
- Google Chrome or a Chromium-based browser (Edge, Brave, Arc)
- The MCP Pointer Chrome Extension (install from the Chrome Web Store, GitHub Releases, or build from source)
- An MCP-compatible AI tool (Claude Code, Cursor, Windsurf, or others)
About MCP Pointer
MCP Pointer bridges the browser and AI coding tools: a Chrome extension captures DOM element selections via Option+Click and sends complete element data (text, CSS, attributes, position, and experimental React component/source info) over a local WebSocket on port 7007 to a Node.js MCP server. The server exposes a single MCP tool, get-pointed-element, that returns textual information about the currently pointed element, with configurable text and CSS detail levels for token-conscious context fetching. AI tools auto-start the server on demand via the npx -y @mcp-pointer/server@latest start command.
Tools & capabilities (1)
get-pointed-elementReturns 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).
When to use it
- Point your AI assistant at a specific UI element on a page and ask it to analyze, debug, or restyle it.
- Give an agentic coding tool precise textual context (text, classes, attributes, computed CSS) about a DOM element without manually copying selectors or markup.
- Identify the React component and source file behind a rendered element (experimental, via Fiber) to jump straight to the relevant code.
- Provide token-conscious element context to the LLM by dialing text and CSS detail levels up or down per request.
Security notes
Runs entirely locally. The MCP server communicates with the Chrome extension over a local WebSocket on port 7007 (configurable via the MCP_POINTER_PORT environment variable). No external authentication or API keys are required; ensure port 7007 is not exposed beyond localhost.
MCP Pointer FAQ
How do I select an element?
Navigate to any webpage with the extension active, then hold Option (Alt on Windows) and click any element. The selection is sent to the MCP server, and your AI tool can read it via the get-pointed-element tool.
How do I configure my AI tool?
Run `npx -y @mcp-pointer/server config claude` (or `cursor`, `windsurf`, or `manual`). The claude command runs `claude mcp add`, cursor opens an install deeplink, windsurf updates ~/.codeium/windsurf/mcp_config.json, and manual prints the raw mcpServers JSON config. Restart your tool afterward.
What port does it use?
The server and Chrome extension communicate over a local WebSocket on port 7007 by default. You can override this by setting the MCP_POINTER_PORT environment variable.
Which frameworks are supported for component detection?
React component names and source files are detected via Fiber (experimental). Generic HTML/CSS/JS is fully supported. Vue.js component detection is planned but not yet available.
Alternatives to MCP Pointer
Compare all alternatives →
All-in-one web access MCP — Web Unlocker, SERP, Scraper API, and a cloud Scraping Browser.
Popular community Playwright + API testing MCP server with codegen, screenshots, and device emulation.
Official Browserbase cloud-browser MCP built on Stagehand — natural-language act/extract/observe.