Log inSubmit server
MCP Pointer logo

MCP Pointer

by etsd-tech

Select browser elements with Option-click and expose their DOM, CSS, and component context to MCP-compatible coding assistants.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install MCP Pointer

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "etsd-tech-mcp-pointer": {
      "command": "npx",
      "args": [
        "-y",
        "@mcp-pointer/server"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Install not yet sandbox-tested— we haven't run this command through our automated sandbox yet. Not a red flag; we're working through the catalog.

Overview

etsd-tech/mcp-pointer MCP server connects a Chrome extension to agentic coding tools through MCP and a local WebSocket bridge. Option-clicking a browser element captures its DOM details, including text, attributes, styles, position, selectors, and experimental React metadata. The server exposes the selected element through the `get-pointed-element` tool, with options for text and CSS detail. Reach for it when an AI coding assistant needs precise context about a visible web interface element.

Use cases

  • Inspect a selected DOM element during frontend debugging
  • Ask an agent to analyze a specific page component
  • Share CSS and layout context without copying markup manually
  • Trace a React element to its component and source file

Key features

  • Option-click DOM element selection
  • Textual DOM, attribute, position, and style context
  • Configurable text and CSS detail
  • Experimental React component detection
  • Local WebSocket bridge on port 7007
  • MCP tool for the current selection

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

20/20 checks healthy over the last 78d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 11d ago via OSV.dev · @mcp-pointer/server (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars598Stargazers on the source repository.
npm downloads257Package downloads in the last 30 days.
Last commit11mo agoMost recent push to the default branch.
Directory activity5 viewsConfig copies, upvotes, and views on AllMCPs.

How MCP Pointer works

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:

Terminal
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:

Terminal
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.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about MCP Pointer

etsd-tech/mcp-pointer is an MCP server that connects a Chrome extension to coding assistants through a local WebSocket bridge. Its main tool, `get-pointed-element`, returns textual details for an Option-clicked DOM element, including text, attributes, CSS, position, and experimental React component metadata.

Install the Chrome extension, then run `npx -y @mcp-pointer/server config <tool>` for Claude Code, Cursor, or Windsurf. Restart the coding assistant afterward. The package can also be installed globally with `npm install -g @mcp-pointer/server`.

Hold Option on macOS, or Alt on Windows, and click the browser element you want to inspect. The extension captures the selection, sends its context to the local server, and makes it available through `get-pointed-element`.

Yes, Cursor is supported by the configuration command. Run `npx -y @mcp-pointer/server config cursor`; the command opens a Cursor deeplink for automatic installation. Restart Cursor after configuration so it loads the MCP connection.

Restart the coding assistant, verify its MCP configuration, and ensure the server can run with `npx -y @mcp-pointer/server@latest start`. Also check that port 7007 is not blocked and that the browser extension can connect over WebSocket.

Related MCP servers

All in Browser Automation All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewMCP Pointer AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/etsd-tech-mcp-pointer?style=directory)](https://allmcps.com/mcp/etsd-tech-mcp-pointer)
HTML Embed
<a href="https://allmcps.com/mcp/etsd-tech-mcp-pointer"><img src="https://allmcps.com/api/badge/etsd-tech-mcp-pointer?style=directory" alt="MCP Pointer on AllMCPs" /></a>