home / mcp / mcp pointer mcp server

MCP Pointer MCP Server

Provides a local MCP server to expose DOM element context to MCP-enabled AI tools.

Installation

Add the following to your MCP client configuration file.

Configuration

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

You can connect your browser-driven element context to your AI coding tools with an MCP server that runs locally. This setup lets you select DOM elements in the browser and seamlessly share their textual context with tools like Claude Code, Cursor, or Windsurf to analyze and act on that context in real time.

How to use

Set up the MCP Pointer server locally and configure it for your preferred MCP tool. Once configured, start the MCP server when you need to analyze a pointed element. Use the element selection workflow to capture details about any DOM node and ask your AI tool to analyze it. The server transfers the element data to the AI tools via the MCP protocol so you can inspect text content, CSS details, attributes, positions, and more.

How to install

Prerequisites: you need Node.js and npm installed on your machine.

1) Install or upgrade the MCP Pointer server tooling for your environment.

2) Install the MCP Pointer Chrome extension from the Chrome Web Store and enable it in Chrome. Then you can start selecting elements in any webpage with Option+Click.

Configuration and start workflow

Configure your MCP client to connect to the MCP Pointer server for your chosen AI tool. Use the exact commands shown to set up the connection, then restart your AI tool so it can load the MCP connection.

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

Starting the MCP server

To run the MCP Pointer server locally, use the following start command. This will start the server so your MCP-enabled AI tools can fetch element context as you point to elements in your browser.

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

Tools you can access through the MCP server

You can query for information about the currently pointed DOM element. The available tool is get-pointed-element, which returns textual information about the element including text detail and CSS level.

Optional arguments for get-pointed-element: - textDetail: 0 | 1 | 2 (default 2) controls how much text to include - cssLevel: 0 | 1 | 2 | 3 (default 1) controls styling detail from no CSS to full computed styles.

Troubleshooting

If the extension does not connect, ensure the MCP server is running, verify WebSocket access, and confirm port 7007 is open. If your MCP tools vanish after installation, restart your AI assistant and re-run the config command to reestablish the MCP connection. If elements fail to highlight, refresh pages and ensure targeting is enabled in the extension.

Notes

This setup is designed to work with Chrome-based browsers and supports real-time element context delivery to MCP-enabled AI tools. You can adjust how much element data is shared and how deeply styling information is exposed through the configured MCP tool.

Available tools

get-pointed-element

Returns textual information about the currently pointed DOM element. Includes optional textDetail and cssLevel arguments to control the amount of text and CSS detail returned.