How to add MCP Pointer to Windsurf

Point at browser DOM elements with Option+Click and feed them as context to agentic coding tools via MCP. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 14, 2026 · 582★ · stdio · no auth

Windsurf config for MCP Pointer

npx -y @mcp-pointer/server config claude

{
  "mcpServers": {
    "mcp-pointer": {
      "command": "npx",
      "args": [
        "-y",
        "@mcp-pointer/server@latest",
        "start"
      ],
      "env": {
        "MCP_POINTER_PORT": "7007"
      }
    }
  }
}

Setup steps

1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
2Paste the MCP Pointer config below.
3Fill in placeholder secrets, then save.
4Click Refresh in the MCP panel.
5MCP Pointer's tools become available to Cascade.

Before you start

Node.js (server runs via npx)
Google Chrome or a Chromium-based browser (Edge, Brave, Arc)
The MCP Pointer Chrome Extension (install from the Chrome Web Store, GitHub Releases, or build from source)
An MCP-compatible AI tool (Claude Code, Cursor, Windsurf, or others)

What MCP Pointer can do in Windsurf

get-pointed-element

Returns textual information about the currently pointed DOM element. Optional arguments: textDetail (0|1|2, default 2) controls how much text to include (0 = none, 1 = visible text only, 2 = visible + hidden); cssLevel (0|1|2|3, default 1) controls styling detail from no CSS (0) up to full computed styles (3).

Security

Runs entirely locally. The MCP server communicates with the Chrome extension over a local WebSocket on port 7007 (configurable via the MCP_POINTER_PORT environment variable). No external authentication or API keys are required; ensure port 7007 is not exposed beyond localhost.

MCP Pointer + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the MCP Pointer config there under the "mcpServers" key and restart the client.

Is MCP Pointer safe to use with Windsurf?

How do I select an element?

Navigate to any webpage with the extension active, then hold Option (Alt on Windows) and click any element. The selection is sent to the MCP server, and your AI tool can read it via the get-pointed-element tool.

How do I configure my AI tool?

Run `npx -y @mcp-pointer/server config claude` (or `cursor`, `windsurf`, or `manual`). The claude command runs `claude mcp add`, cursor opens an install deeplink, windsurf updates ~/.codeium/windsurf/mcp_config.json, and manual prints the raw mcpServers JSON config. Restart your tool afterward.

What port does it use?

The server and Chrome extension communicate over a local WebSocket on port 7007 by default. You can override this by setting the MCP_POINTER_PORT environment variable.

View repo Full MCP Pointer page