etsd-tech/mcp-pointer

MCP tool: let you point at DOM elements for your favorite agentic coding tool. Let AI see what you see.

agentic-codingbrowserclaude-codecursordomdom-elementmcpmcp-serverpointingstdio

GAI 中文摘要

mcp-pointer 是一个基于 Model Context Protocol 的本地化工具，它通过结合 Chrome 插件与 MCP 服务器，实现了浏览器 DOM 元素与 AI 编程工具之间的实时连接。该项目让 AI 能够精准获取用户在浏览器中选中的页面元素信息，从而有效解决 AI 在辅助 Web 开发时缺乏实时界面上下文的问题。

用户只需通过 Option 加鼠标点击，即可在浏览器中快速选中任意页面元素。系统能自动提取包括 CSS 类名、HTML 属性、样式细节及文本内容在内的完整元数据。支持动态配置上下文精度，可根据需求选择仅显示文本、精简信息或获取完整的计算样式。实验性支持通过 React Fiber 探测组件名称及其对应的源码文件。通过 WebSocket 实现浏览器与 Claude Code、Cursor 等 AI 开发代理的高效实时交互。

该工具主要适用于前端开发者与 Web 自动化工程师，常用于在处理复杂 Web 界面开发、调试或测试时，让 AI 代理能够通过“视觉指引”更精准地理解并操作特定的 DOM 结构。

⭐

570

Stars

🔱

Forks

👁

Watchers

📋

Issues

TypeScriptMIT创建于 2025/9/1更新于 1 周前

在 GitHub 上查看

README

由 Gemini 翻译整理

👆 MCP Pointer

通过 MCP 为你的智能编码工具提供浏览器 DOM 元素指向功能！让 AI 能看到你所见的内容。

MCP Pointer 是一个本地工具，由 MCP Server 和 Chrome 扩展程序组成：

🖥️ MCP Server (Node.js 包) - 通过 Model Context Protocol (MCP) 在浏览器与 AI 工具之间建立桥梁。
🌐 Chrome Extension - 使用 Option+Click 在浏览器中捕获选中的 DOM 元素。

该扩展允许你在浏览器中可视化选择 DOM 元素，而 MCP server 则通过标准化的 MCP 工具，将这些文本上下文提供给 Claude Code、Cursor 和 Windsurf 等智能编码工具。

✨ 功能特性

🎯 Option+Click 选择 - 只需按住 Option 键（Windows 上为 Alt）并点击任意元素即可。
📋 完整的元素数据 - 包含文本内容、CSS 类名、HTML 属性、定位信息和样式。
💡 动态上下文控制 - 可根据每次 MCP 调用请求仅可见文本、完全忽略文本，或调整 CSS 细节（从无到完整的计算样式）。
⚛️ React 组件检测 - 通过 Fiber 获取组件名称和源文件（实验性功能）。
🔗 WebSocket 连接 - 实现浏览器与 AI 工具之间的实时通信。
🤖 MCP 兼容 - 支持 Claude Code 及其他所有支持 MCP 的 AI 工具。

🎬 使用示例（视频）

https://github.com/user-attachments/assets/98c4adf6-1f05-4c9b-be41-0416ab784e2c

查看 MCP Pointer 的实际演示：在浏览器中 Option+Click 点击任意元素，然后向你的 AI 编码工具提问（本示例中为 Claude Code）。AI 将获取关于所选 DOM 元素的完整文本上下文，包括 CSS 属性、URL、选择器等。

🚀 快速开始

1. 安装 Chrome 扩展程序

🎉 现已上架 Chrome 应用商店！

点击上方链接即可直接从 Chrome 应用商店安装。

备选方案：手动安装

方案 A：从 Releases 下载

前往 GitHub Releases
从最新版本下载 mcp-pointer-chrome-extension.zip
将 zip 文件解压到计算机上的文件夹中
打开 Chrome → 设置 → 扩展程序 → 开发者模式（开启）
点击“加载已解压的扩展程序”并选择刚才解压的文件夹
MCP Pointer 扩展程序应出现在你的扩展列表中
刷新网页以激活扩展

方案 B：从源码构建

克隆本项目仓库
按照 CONTRIBUTING.md 中的构建说明进行操作
打开 Chrome → 设置 → 扩展程序 → 开发者模式（开启）
点击“加载已解压的扩展程序”并选择 packages/chrome-extension/dist/ 文件夹
刷新网页以激活扩展

2. 配置 MCP Server

为你的 AI 工具执行一条命令进行配置：

npx -y @mcp-pointer/server config claude  # 或 cursor, windsurf 等 - 见下文

其他 AI 工具及选项

# 针对其他 AI 工具
npx -y @mcp-pointer/server config cursor     # 打开 Cursor 深层链接进行自动安装
npx -y @mcp-pointer/server config windsurf   # 自动更新 Windsurf 配置文件
npx -y @mcp-pointer/server config manual     # 显示其他工具的手动配置方法

可选： 你可以使用 npm install -g @mcp-pointer/server 进行全局安装，之后即可使用 mcp-pointer 代替 npx -y @mcp-pointer/server。

配置完成后，重启你的编码工具以加载 MCP 连接。

🔄 已经在用 MCP Pointer 了？ 再次运行配置命令以更新到自动更新配置模式：
npx -y @mcp-pointer/server config   # 重新配置为始终使用最新版本

3. 开始使用

导航到任意网页
Option+Click 点击任意元素进行选择
询问你的 AI 分析该目标元素！

你的 AI 工具会在需要时通过 npx -y @mcp-pointer/server@latest start 命令自动启动 MCP server。

可用的 MCP 工具：

get-pointed-element – 返回当前指向元素的文本信息。