MCP Pointer
An MCP server and Chrome extension that allows users to select browser DOM elements via a keyboard shortcut to provide detailed technical context to AI coding tools. It captures HTML attributes, CSS styles, and React component metadata, enabling agen
What is MCP Pointer?
MCP Pointer is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to mcp server and chrome extension that allows users to select browser dom elements via a keyboard shortcut to provide detailed technical context to ai coding tools. it captures html attributes, css styl...
An MCP server and Chrome extension that allows users to select browser DOM elements via a keyboard shortcut to provide detailed technical context to AI coding tools. It captures HTML attributes, CSS styles, and React component metadata, enabling agen
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- An MCP server and Chrome extension that allows users to sele
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx mcp-pointerConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use MCP Pointer
MCP Pointer is an MCP server paired with a Chrome browser extension that lets you select any DOM element on a live webpage by holding Alt and clicking, then instantly sends that element's full technical context — HTML attributes, computed CSS styles, React component names, and coordinates — to your AI coding tool. It bridges the gap between what you see in the browser and what your AI assistant knows about your frontend code, enabling precise, context-rich instructions without manually copying HTML snippets.
Prerequisites
- Google Chrome browser installed
- Node.js 18 or higher installed
- npm or npx available on your PATH
- An MCP client such as Claude Code CLI or Cursor
- No API keys required
Install the Chrome extension
Install the MCP Pointer extension from the Chrome Web Store, or manually load it: download the mcp-pointer-chrome-extension.zip from the GitHub Releases page, extract it, go to chrome://extensions, enable Developer mode, and click 'Load unpacked' pointing to the extracted folder.
Install and configure the MCP server for your AI tool
Run the npx config command for your specific AI tool. This installs the MCP server package and writes the configuration to the correct location automatically.
# For Claude Code:
npx -y @mcp-pointer/server config claude
# For Cursor:
npx -y @mcp-pointer/server config cursor
# For Windsurf:
npx -y @mcp-pointer/server config windsurf(Optional) Install the MCP server globally
Install the server package globally if you prefer not to use npx every time.
npm install -g @mcp-pointer/serverRestart your MCP client
Restart Claude Code or Cursor to load the new MCP server. The 'get-pointed-element' tool should appear in the available tools list.
Point at a DOM element and ask your AI assistant
Open any webpage in Chrome, hold the Alt key (Option on macOS) and click on any element. Then switch to your AI coding tool and ask about the selected element — it will have full DOM context including CSS and React metadata.
MCP Pointer Examples
Client configuration
Manual MCP configuration for claude_desktop_config.json after installing @mcp-pointer/server globally.
{
"mcpServers": {
"mcp-pointer": {
"command": "npx",
"args": ["-y", "@mcp-pointer/server"]
}
}
}Prompts to try
Use these prompts in Claude Code or Cursor after pointing at a DOM element with the Chrome extension.
- "I've selected a button element — what CSS changes do I need to make it match our design system's primary button style?"
- "Look at the pointed element's React component name and find where it's defined in our codebase"
- "The selected element has incorrect padding — write a CSS fix targeting its exact class names"
- "Analyze the pointed div's computed styles and tell me why it might be causing a layout shift"
- "I selected a form input — what accessibility attributes are missing from its HTML?"Troubleshooting MCP Pointer
Alt+click does not capture the element — nothing is sent to the MCP server
Ensure the MCP Pointer Chrome extension is enabled in chrome://extensions and that the extension icon is visible in the toolbar. The extension communicates over WebSocket on port 7007 — check that nothing else is using that port with 'lsof -i :7007'.
get-pointed-element tool is not visible in Claude Code or Cursor
Run 'npx -y @mcp-pointer/server config claude' (or cursor/windsurf) again to ensure the config was written. Restart the MCP client completely. Check that the config was added to the correct file by inspecting ~/.claude/mcp.json or the equivalent for your client.
React component names are missing from the element context
React DevTools must be installed in Chrome for MCP Pointer to extract React component metadata. Install the React Developer Tools extension from the Chrome Web Store and reload the page before pointing.
Frequently Asked Questions about MCP Pointer
What is MCP Pointer?
MCP Pointer is a Model Context Protocol (MCP) server that mcp server and chrome extension that allows users to select browser dom elements via a keyboard shortcut to provide detailed technical context to ai coding tools. it captures html attributes, css styles, and react component metadata, enabling agen It connects AI assistants to external tools and data sources through a standardized interface.
How do I install MCP Pointer?
Follow the installation instructions on the MCP Pointer GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with MCP Pointer?
MCP Pointer works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is MCP Pointer free to use?
Yes, MCP Pointer is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
MCP Pointer Alternatives — Similar Browser Automation Servers
Looking for alternatives to MCP Pointer? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up MCP Pointer in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use MCP Pointer?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.