SuperAPI AI 工具集
合作ENAI 行业资讯收藏
全部工具AI编程工具mcp-pointer

mcp-pointer

MCP Pointer 是一个面向智能体编程工具的本地 DOM 元素选择工具，由 Node.js 编写的 MCP 服务器与 Chrome 扩展组成。安装扩展后，按住 Option（Windows 为 Alt）并点击网页元素，即可将元素的文本内容、CSS 类、HTML 属性、定位与样式等文本信息，经由 WebSocket 与模型上下文协议（MCP）传递给 Claude Code、Cursor、Windsurf 等支持 MCP 的 AI 编程工具，让 AI 看到你所看到的元素。它支持动态控制文本与 CSS 详细程度、实验性 React 组件检测，已在 Chrome 全面测试，Chromium 系浏览器可手动加载构建版本使用。

访问官网

工具介绍

用途

MCP Pointer 用于让智能体编程工具“看到”你在浏览器中指向的 DOM 元素。它把 MCP 服务器与 Chrome 扩展组合成一个本地工具：扩展负责在浏览器中采集 DOM 元素选择，MCP 服务器则通过模型上下文协议（MCP），把采集到的文本上下文提供给 Claude Code、Cursor、Windsurf 等支持 MCP 的 AI 编程工具。

主要能力

  • Option+Click 选择：按住 Option（Windows 上为 Alt）并点击任意元素即可选中。
  • 完整元素数据：文本内容、CSS 类、HTML 属性、定位与样式。
  • 动态上下文控制：可按每次 MCP 调用请求仅可见文本、完全抑制文本，或调整 CSS 详细程度（从无到完整计算样式）。
  • React 组件检测：通过 Fiber 获取组件名称与源文件（实验性）。
  • WebSocket 连接：浏览器与 AI 工具之间的实时通信。
  • MCP 兼容：可与 Claude Code 及其他支持 MCP 的 AI 工具配合使用。

使用方式

1. 安装 Chrome 扩展

可从 Chrome 网上应用店安装；也可在 GitHub Releases 下载 mcp-pointer-chrome-extension.zip，解压后在 Chrome → 设置 → 扩展程序 → 开启开发者模式 → 点击“加载已解压的扩展程序”并选择解压文件夹；还可从源码构建，参见 CONTRIBUTING.md，然后加载 packages/chrome-extension/dist/ 文件夹。安装后重新加载网页以激活扩展。

2. 配置 MCP 服务器

为 AI 工具提供一条命令即可完成配置。可选：使用 npm install -g @mcp-pointer/server 全局安装，以便用 mcp-pointer 替代 npx -y @mcp-pointer/server。配置后重启编程工具以加载 MCP 连接。已在使用 MCP Pointer 的用户，再次运行配置命令可更新为自动更新配置。

3. 使用流程

浏览任意网页，Option+Click 选择元素，向 AI 提问分析所选元素。AI 工具会按需通过 npx -y @mcp-pointer/server@latest start 自动启动 MCP 服务器。

可用 MCP 工具

  • get-pointed-element：返回当前所指 DOM 元素的文本信息。可选参数：
    • textDetail：0 | 1 | 2（默认 2），控制包含多少文本（0 = 无，1 = 仅可见文本，2 = 可见 + 隐藏）。
    • cssLevel：0 | 1 | 2 | 3（默认 1），控制样式细节程度，从无 CSS（0）到完整计算样式（3）。

工作原理

  1. 元素选择：内容脚本捕获 Option+Click 事件。
  2. 数据提取：分析元素结构、CSS 与框架信息。
  3. WebSocket 传输：将数据发送到端口 7007 上的 MCP 服务器。
  4. MCP 协议：通过 MCP 工具向 AI 工具提供数据。
  5. AI 分析：助手即可查看并分析该元素。

提取的元素数据

  • 基本信息：标签名、ID、类、文本内容
  • CSS 属性：display、position、颜色、尺寸
  • 组件信息：React 组件名称与源文件（实验性）
  • 属性：所有 HTML 属性
  • 位置：精确坐标与尺寸
  • 来源提示：文件路径与组件来源

适用场景

适用于前端开发与调试：在浏览器中直观定位元素，再让智能体编程工具分析其结构、样式或组件来源，从而辅助修改代码。也可用于组件开发工作流。

框架与浏览器支持

  • 框架：React（通过 Fiber 获取组件名称与源文件，实验性）；通用 HTML/CSS/JS 完整支持；Vue 组件检测为计划中（欢迎 PR）。
  • 浏览器：Chrome 完整支持（已测试）；Chromium 系浏览器（Edge、Brave、Arc）应可使用，需手动加载构建版扩展。

限制与故障排查

  • 部分页面会阻止内容脚本（如 chrome:// 等）。
  • 扩展未连接：确认服务器已运行（npx -y @mcp-pointer/server@latest start）；检查浏览器控制台 WebSocket 错误；确认端口 7007 未被防火墙阻止。
  • MCP 工具不可用：安装后重启 AI 助手；检查 MCP 配置（mcp-pointer config <你的工具>）；确认服务器运行。
  • 元素未高亮：尝试刷新页面；检查目标选择是否启用（点击扩展图标）。

路线图

  • 动态上下文控制（已支持）：完整原始上下文传给服务器、LLM 可配置的详细级别、渐进式细化选项 / 注重 token 的数据获取。
  • 视觉内容支持（面向多模态 LLM）：图片（img 标签）的 Base64 编码、所选元素截图、用于直接获取视觉内容的独立 MCP 工具。
  • 增强框架支持：Vue.js 组件检测；改进 React 支持（React 19 移除了 _debugSource，影响开发构建中的源映射）。
  • 多选：支持选择多个 DOM 元素。

许可与贡献

MIT 许可证，详见 LICENSE 文件。欢迎贡献，开发设置与指南见 CONTRIBUTING.md。工具受 Click-to-Component 等组件开发工作流工具启发。

同类工具

查看分类