关键词

浏览器元素分析网页上下文AI编程工具DOM元素交互LLM辅助开发

MCP Pointer 使用说明

项目简介

MCP Pointer 是一个本地工具，包含一个MCP服务器和一个Chrome浏览器扩展。它允许用户通过在浏览器中Option+Click（Mac上是Option键，Windows上是Alt键）选择任何DOM元素，然后将该元素的详细上下文信息（如文本内容、CSS属性、React组件信息等）提供给支持 Model Context Protocol (MCP) 的AI编程工具，如Claude Code, Cursor, Windsurf等，从而增强AI分析和理解网页内容的能力。

主要功能点

  • 视觉元素选中: 通过简单的Option+Click即可在任何网页上快速选择DOM元素。
  • 全面元素数据: 获取元素的完整信息，包括标签名、ID、CSS类、文本内容、所有HTML属性、精确位置和尺寸、计算后的CSS属性（如'display', 'position', 'font-size', 'color', 'background-color'）等。
  • React组件检测: 实验性地检测React组件的名称和其对应的源文件信息。
  • 实时通信: 通过WebSocket在浏览器扩展和本地MCP服务器之间进行实时数据传输，确保AI总是能获取最新的选中元素信息。
  • MCP兼容: 作为标准的MCP服务器实现，可以无缝集成到支持MCP协议的AI工具和开发环境中。

安装步骤

1. 配置MCP服务器

打开终端，运行以下命令来配置并启动MCP服务器：

# 推荐使用npx直接运行配置命令。这会自动为您的AI工具配置MCP Pointer服务器。
# MCP Pointer服务器会在AI工具需要时自动启动。

# 为Claude Code自动配置MCP Pointer服务器
npx -y @mcp-pointer/server config claude

# 为Cursor IDE自动配置MCP Pointer服务器（将打开Cursor深度链接进行安装）
npx -y @mcp-pointer/server config cursor

# 为Windsurf IDE自动更新配置文件以集成MCP Pointer服务器
npx -y @mcp-pointer/server config windsurf

# 显示适用于其他MCP兼容AI工具的手动配置指南
npx -y @mcp-pointer/server config manual

可选: 您也可以全局安装MCP Pointer服务器（然后可以使用 'mcp-pointer' 命令替代 'npx -y @mcp-pointer/server'）：

npm install -g @mcp-pointer/server

2. 安装Chrome浏览器扩展

目前MCP Pointer扩展尚未发布到Chrome网上应用店，需要手动加载：

  1. 从项目GitHub发布页面下载最新版本（未来即将推出）。
  2. 或者按照项目仓库中 'CONTRIBUTING.md' 文件里的说明，从源代码构建扩展程序。
  3. 构建完成后，在Chrome浏览器中：
    • 打开Chrome → 设置 → 扩展程序。
    • 启用右上角的“开发者模式”。
    • 点击“加载已解压的扩展程序”按钮。
    • 选择 'packages/chrome-extension/dist/' 文件夹。
    • MCP Pointer扩展程序将出现在您的Chrome扩展程序列表中。

服务器配置 (供MCP客户端使用)

此MCP服务器通过JSON-RPC协议提供服务，LLM客户端（如Claude Code、Cursor等）通过此协议与其通信。您需要将以下信息添加到您的AI工具的MCP配置界面中。

MCP客户端通常会要求您提供一个服务器名称、启动命令及其参数来连接到MCP服务器。以下是一个常见的MCP服务器配置示例（JSON格式），您需要将其复制并粘贴到您的AI工具的MCP配置界面中，并根据工具的具体要求进行调整：

{
  "mcpServers": {
    "pointer": { // 服务器名称：在AI工具中标识此MCP服务器的唯一名称
      "command": "npx", // 启动MCP Pointer服务器的命令
      "args": ["-y", "@mcp-pointer/server", "start"], // 传递给启动命令的参数列表
      "env": {
        "MCP_POINTER_PORT": "7007" // 可选：指定WebSocket端口，默认端口为7007
      }
    }
  }
}

配置说明:

  • 服务器名称 (通常是 "pointer"): 用于在AI工具中识别此MCP服务器的唯一名称。
  • 启动命令 (command): 启动MCP Pointer服务器的可执行文件或脚本。通常使用 'npx' 来直接运行npm包。
  • 命令参数 (args): 传递给 'command' 的参数列表。对于MCP Pointer，这通常是 '["-y", "@mcp-pointer/server", "start"]'，表示使用npx运行 '@mcp-pointer/server' 包的 'start' 命令。
  • 环境变量 (env): 一个可选的对象，用于设置启动服务器时所需的环境变量。例如，'{"MCP_POINTER_PORT": "7007"}' 可以用来指定WebSocket端口，如果未指定，默认端口为7007。

请注意：上述JSON是一个示例结构，展示了MCP客户端通常期望的配置信息。不同的AI工具可能有略微不同的配置界面或JSON结构。例如，有些工具可能直接提供“添加MCP服务器”的表单，您只需将“服务器名称”、“命令”和“参数”填入对应的输入框。请参考您AI工具的文档进行具体配置。

基本使用方法

  1. 浏览网页: 在Chrome浏览器中访问任何您想要分析的网页。
  2. 选中元素: 按住键盘上的 'Option' 键（Windows上是 'Alt' 键），然后用鼠标点击您想要AI分析的任何DOM元素。被选中的元素会高亮显示。
  3. 向AI提问: 切换到您的AI助手（如Claude Code、Cursor），然后向它提问关于刚刚选中的元素的问题。例如：“分析这个元素”、“这个按钮是做什么用的？”。AI将自动启动MCP服务器，并通过 'get-pointed-element' 工具获取选定元素的完整上下文信息，然后进行分析并生成响应。

MCP服务器提供的AI工具功能:

  • 'get-pointed-element': 获取用户当前在浏览器中选定元素的详细信息。
  • 'clear-pointed-element': 清除当前元素选择（此功能通常由AI工具或扩展程序内部处理）。
  • 'get-pointer-status': 检查MCP Pointer系统的运行状态和统计信息（此功能主要用于诊断）。

信息

分类

开发者工具

访问项目