SkillFoxx

Type a name, a task or a service

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

MCP server

Medium risk

We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.

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
All reasons and checks

etsd-tech/mcp-pointerAuthor:etsd-tech

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add mcp/mcp-pointer

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Run in a terminal

claude mcp add --transport stdio mcp-pointer -- npx -y @mcp-pointer/server config claude

Or add to the file .mcp.json, in the project

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

If the file already exists, add the server inside the mcpServers key.

Install in Cursor

The button opens the agent and offers to add the server. If nothing happens, copy the config below.

Add to the file ~/.cursor/mcp.json, for all projects

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

If the file already exists, add the server inside the mcpServers key. For a single project, put the same block into .cursor/mcp.json.

Install in VS Code

The button opens the agent and offers to add the server. If nothing happens, copy the config below.

Run in a terminal

code --add-mcp '{"name":"mcp-pointer","type":"stdio","command":"npx","args":["-y","@mcp-pointer/server","config","claude"]}'

Or add to the file .vscode/mcp.json, in the project

{
  "servers": {
    "mcp-pointer": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@mcp-pointer/server",
        "config",
        "claude"
      ]
    }
  }
}

If the file already exists, add the server inside the servers key.

Run in a terminal

codex mcp add mcp-pointer -- npx -y @mcp-pointer/server config claude

Or add to the file ~/.codex/config.toml, for all projects

[mcp_servers.mcp-pointer]
command = "npx"
args = ["-y", "@mcp-pointer/server", "config", "claude"]

If the file already exists, append the block to the end.

Add to the file ~/.gemini/settings.json, for all projects

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

If the file already exists, add the server inside the mcpServers key.

Add to the file ~/.config/devin/mcp_config.json, for all projects

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

If the file already exists, add the server inside the mcpServers key. Legacy Cascade keeps the MCP config in ~/.codeium/windsurf/mcp_config.json.

Formerly Windsurf.

Add to the file cline_mcp_settings.json, for all projects

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

If the file already exists, add the server inside the mcpServers key. Open the settings file in Cline: MCP Servers tab, Configure MCP Servers.

Add to the file .roo/mcp.json, in the project

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

If the file already exists, add the server inside the mcpServers key.

A fork of Roo Code, same .roo folders.

Add to the file opencode.json, in the project

{
  "mcp": {
    "mcp-pointer": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "@mcp-pointer/server",
        "config",
        "claude"
      ]
    }
  }
}

If the file already exists, add the server inside the mcp key.

Add to the file ~/.config/zed/settings.json, for all projects

{
  "context_servers": {
    "mcp-pointer": {
      "command": "npx",
      "args": [
        "-y",
        "@mcp-pointer/server",
        "config",
        "claude"
      ]
    }
  }
}

If the file already exists, add the server inside the context_servers key.

Add to the file .codeassistant/mcp.json, in the project

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

If the file already exists, add the server inside the mcpServers key.

You will need: Node.js

Checked against the repository on Sep 25, 2026, commit 59601d1.

Text for your agent

Configure the MCP server: npx -y @mcp-pointer/server config claude, then restart the agent. Install the MCP Pointer extension from the Chrome Web Store.

Other ways from the author
npx -y @mcp-pointer/server config claude

Configures MCP for Claude Code. Restart the agent afterward.

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 grid

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.

MCP

Transport
stdio
Authentication
not required

Security check

  • 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

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.

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.

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium riskNo VPN needed142.9K
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium riskNo VPN needed124.8K
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk72.1K
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.7K
Foxx AIMCP Pointer

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.