MCP Pointer
An MCP server plus a Chrome extension: pick a DOM element by Option-click and the agent gets its text, styles and selector
- 600 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Reads page content and styles in the browser and passes them to the agent
- Runs a local server and a WebSocket link to the extension
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/mcp-pointerDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Reads page content and styles in the browser and passes them to the agent
- Runs a local server and a WebSocket link to the extension
This is third-party code. Review the repository files before installing.
What it does
MCP Pointer links the browser and a coding agent over MCP. The Chrome extension lets you pick any page element by Option-click, and a local server hands the agent its content: text, CSS classes, attributes, position and styles. You can ask for visible text only, suppress text entirely or dial the CSS detail per call. An experimental mode detects React components via Fiber with a name and a source file. Communication runs over WebSocket and works with Claude Code, Cursor and Windsurf.
Who it is for. For frontend developers and designers who edit UI together with a coding agent.
Good fit when
- You want to show the agent a specific page element instead of describing it
- You are editing an element's markup or style with the agent
- You need the selector, classes and styles of the picked element
Not a fit when
- You do not use Chrome and the extension
- You need browser action automation rather than passing element context
Example request
I picked an element in the browser, fix its padding and align it to the gridMCP
- Transport
- stdio
- Authentication
- not required
Limitations
It needs the Chrome extension from the Chrome Web Store or a manual build, plus the local Node.js MCP server. Restart the agent after configuration. React component detection is marked experimental. The tool is local and makes no external calls of its own.
How to disable. Remove mcp-pointer from the agent's MCP config and uninstall the Chrome extension.
FAQ
How do I pick an element?
Hold Option (Alt on Windows) and click an element on the page; the agent gets its text, styles, selector and position.
Do I need keys or a cloud?
No. The server is local, it talks to the browser over WebSocket, and the tool has no external APIs.
Discussion
No questions or reviews yet.
Related
MCP serversConsole, network, screenshots and Lighthouse audits from your open Chrome session to the agent via a DevTools extension
A plugin for Claude Code, Codex and Cursor that adds WebMCP tools to your site so browser agents use app logic.
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
An MCP server shows agent steps on screen: a mechanical spider catches words and branches split work into code, model and you.
An agent inspects a live Three.js scene, tries material and light tweaks in the browser and writes the accepted ones into source.
Ties a running frontend to an agent: a click leads to the source line, and the agent sees live DOM, props and state.
README in short
The README describes a local tool in two parts: a Node.js MCP server and a Chrome extension. The extension captures an element pick via Option-click, and the server passes the agent its text, classes, attributes, position and styles over MCP. Detail can change per call, and React component detection is experimental. The extension installs from the Chrome Web Store and the server is configured with one command for Claude Code, Cursor and Windsurf. MIT licensed.