# etsd-tech/mcp-pointer [Health: Active]

**Category:** 📂 Browser Automation  
**Repository:** https://github.com/etsd-tech/mcp-pointer  
**GitHub Stars:** 598  
**npm Downloads (last month):** 257  
**Views:** 5  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/etsd-tech-mcp-pointer

## Description
Visual DOM element selector for agentic coding tools. Chrome extension + MCP server bridge for Claude Code, Cursor, Windsurf etc. Option+Click to capture elements.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "mcp-pointer": {
    "command": "npx",
    "args": ["-y","@mcp-pointer/server"]
  }
}
```

## Documentation

## What etsd-tech/mcp-pointer MCP server does

etsd-tech/mcp-pointer MCP server links a browser-based selection workflow with MCP-compatible coding assistants. Its Chrome extension listens for Option-clicks, extracts information about the selected DOM element, and passes that information to a local Node.js MCP server. The assistant can then inspect the element without requiring the developer to manually copy HTML, CSS, or component details.

The extracted context can include the element's tag, ID, classes, text, HTML attributes, coordinates, dimensions, CSS properties, URL, selector, and source hints. For React pages, the extension can also report component names and source files through React Fiber. React framework support is marked experimental.

## How it works

The browser extension uses a content script to capture an Option-click and identify the targeted element. It analyzes the element and its surrounding framework metadata, then sends the result over a WebSocket connection to port 7007. The MCP server makes the current selection available to the connected coding assistant through the MCP protocol.

The main interaction is intentionally stateful: select an element in the browser first, then ask the assistant to analyze it. The available MCP operation reads the element that is currently pointed to rather than accepting an arbitrary selector as input.

## Setup and configuration

Install the extension from the Chrome Web Store, or download a release archive and load it as an unpacked extension with Chrome's Developer mode enabled. A source build can also be loaded from `packages/chrome-extension/dist/`. Pages generally need to be reloaded after installing or enabling the extension.

Configure the MCP server with the npm package:

```bash
npx -y @mcp-pointer/server config claude
```

The configuration command also accepts `cursor`, `windsurf`, or `manual`. The Cursor option opens a deeplink for installation, while the Windsurf option updates its configuration file. The manual mode displays configuration for other tools. After configuration, restart the coding assistant. The server can also be installed globally with `npm install -g @mcp-pointer/server`.

If automatic startup is not available, start it directly with:

```bash
npx -y @mcp-pointer/server@latest start
```

## Tools and capabilities

etsd-tech/mcp-pointer MCP server provides one documented MCP tool:

- `get-pointed-element`: Returns textual information about the element most recently selected in the browser.

The tool accepts optional detail controls:

- `textDetail`: `0` omits text, `1` includes visible text, and `2` includes visible and hidden text. The default is `2`.
- `cssLevel`: `0` omits CSS, while `1`, `2`, and `3` provide progressively more styling information up to full computed styles. The default is `1`.

These controls allow an assistant or caller to reduce text and styling context when a smaller response is preferable.

## Limitations and notes

Chrome is the tested browser. Browser-restricted pages, including `chrome://` URLs, may block content scripts.

The extension and MCP server communicate locally through WebSocket port 7007, so firewall rules or another process using that port can prevent connection. If tools do not appear, restart the assistant and check the generated MCP configuration. React component and source-file detection is experimental, and Vue component detection is not currently listed as supported. Multiple-element selection, image transfer, screenshots, and other visual-content features are roadmap items rather than current capabilities.

_Full upstream README: https://allmcps.com/mcp/etsd-tech-mcp-pointer/readme_