官方说明10 个来源MCP 服务8 天前
etsd-tech/mcp-pointer
📇 🏠 🍎 🪟 🐧 - Visual DOM element selector for coding agents: a Chrome extension and server bridge to capture…
在 GitHub 查看 ↗直链 · 无中转页
官方说明📇 🏠 🍎 🪟 🐧 - Visual DOM element selector for coding agents: a Chrome extension and server bridge to capture page elements with Option+Click.
配置模板（请按你的客户端调整）
claude mcp add mcp-pointer -- npx -y mcp-pointer
这是根据仓库名生成的可粘贴骨架，命令行参数与包名请以该项目 README 为准。
- ★ 数取值
- 598 ★ · etsd-tech/mcp-pointer · 取自该仓库的 GitHub 页面 · （2026-10-16 20:00:20 核对）
- 来源明细
- 收录自 punkpeye/awesome-mcp-servers 榜单（我们从中收集的条目之一） · 条目类型：MCP 服务
- 收录与活跃
- 收录于 2026-10-09 · 最近见到 2026-10-16 · 共见到 32 次 · 被 10 个来源列出
- 评分构成
- 综合分 1,003 · 598 ★ · 10 个来源 · mcp
常见问题（答案都来自我们的记录）
怎么安装？
我们【没有】从该仓库取到安装命令（我们的 install 覆盖率只有约 4%）。请看它的 README 或 releases 页。
它适合谁 / 用来做什么？
我们把它归在这些标签下: MCP 服务。标签来自条目自身，不是我们强加的分类。
谁维护它、还在更新吗？
仓库
etsd-tech/mcp-pointer；我们收录于 2026-10-09；最近见到 2026-10-16。这里没有"官方认证"或"质量评级"——我们只记录来源与时间。第三方质量标记
👆 MCP Pointer
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
**Point to browser DOM elements for agentic coding tools via MCP!**
MCP Pointer is a *local* tool combining an MCP Server with a Chrome Extension:
1. **🖥️ MCP Server** (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol
2. **🌐 Chrome Extension** - Captures DOM element selections in the browser using Option+Click
The extension lets you visually select DOM elements in the browser, and the MCP server makes this **textual context** available to agentic coding tools like Claude Code, Cursor, and Windsurf through standardized MCP tools.
✨ Features
- 🎯 **Option+Click Selection** - Simply hold Option (Alt on Windows) and click any element
- 📋 **Complete Element Data** - Text content, CSS classes, HTML attributes, positioning, and styling
- 💡 **Dynamic Context Control** - Request visible-only text, suppress text entirely, or dial CSS detail from none → full computed styles per MCP call
- ⚛️ **React Component Detection** - Component names and source files via Fiber (experimental)
- 🔗 **WebSocket Connection** - Real-time communication between browser and AI tools
- 🤖 **MCP Compatible** - Works with Claude Code and other MCP-enabled AI tools
🎬 Usage example (video)
https://github.com/user-attachments/assets/98c4adf6-1f05-4c9b-be41-0416ab784e2c
See MCP Pointer in action: Option+Click any element in your browser, then ask your agentic coding tool about it (in this example, Claude Code). The AI gets complete textual context about the selected DOM element including CSS properties, url, selector, and more.
🚀 Getting Started
1. Install Chrome Extension
**🎉 Now available on Chrome Web Store!**
Simply click the link above to install from the Chrome Web Store.
Alternative: Manual Installation
**Option A: Download from Releases**
1. Go to GitHub Releases
2. Download mcp-pointer-chrome-extension.zip from the latest release
3. Extract the zip file to a folder on your computer
4. Open Chrome → Settings → Extensions → Developer mode (toggle ON)
5. Click "Load unpacked" and select the extracted folder
6. The MCP Pointer extension should appear in your extensions list
7. **Reload web pages** to activate the extension
**Option B: Build from Source**
1. Clone this repository
2. Follow the build instructions in CONTRIBUTING.md
3. Open Chrome → Settings → Extensions → Developer mode (toggle ON)
4. Click "Load unpacked" and select the packages/chrome-extension/dist/ folder
5. **Reload web pages** to activate the extension
2. Configure MCP Server
One command setup for your AI tool:
Other AI Tools & Options
> **Optional:** You can install globally with npm install -g @mcp-pointer/server to use mcp-pointer instead of npx -y @mcp-pointer/server
After configuration, **restart your coding tool** to load the MCP connection.
> **🔄 Already using MCP Pointer?** Run the config command again to update to auto-updating configuration:
>
3. Start Using
1. **Navigate to any webpage**
2. **Option+Click** any element to select it
3. **Ask your AI** to analyze the targeted element!
Your AI tool will automatically start the MCP server when needed using the npx -y @mcp-pointer/server@latest start command.
**Available MCP Tool:**
- get-pointed-element – Returns textual information about the currently pointed DOM element. Optional arguments:
MCP Pointer is a *local* tool combining an MCP Server with a Chrome Extension:
1. **🖥️ MCP Server** (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol
2. **🌐 Chrome Extension** - Captures DOM element selections in the browser using Option+Click
The extension lets you visually select DOM elements in the browser, and the MCP server makes this **textual context** available to agentic coding tools like Claude Code, Cursor, and Windsurf through standardized MCP tools.
✨ Features
- 🎯 **Option+Click Selection** - Simply hold Option (Alt on Windows) and click any element
- 📋 **Complete Element Data** - Text content, CSS classes, HTML attributes, positioning, and styling
- 💡 **Dynamic Context Control** - Request visible-only text, suppress text entirely, or dial CSS detail from none → full computed styles per MCP call
- ⚛️ **React Component Detection** - Component names and source files via Fiber (experimental)
- 🔗 **WebSocket Connection** - Real-time communication between browser and AI tools
- 🤖 **MCP Compatible** - Works with Claude Code and other MCP-enabled AI tools
🎬 Usage example (video)
https://github.com/user-attachments/assets/98c4adf6-1f05-4c9b-be41-0416ab784e2c
See MCP Pointer in action: Option+Click any element in your browser, then ask your agentic coding tool about it (in this example, Claude Code). The AI gets complete textual context about the selected DOM element including CSS properties, url, selector, and more.
🚀 Getting Started
1. Install Chrome Extension
**🎉 Now available on Chrome Web Store!**
Simply click the link above to install from the Chrome Web Store.
Alternative: Manual Installation
**Option A: Download from Releases**
1. Go to GitHub Releases
2. Download mcp-pointer-chrome-extension.zip from the latest release
3. Extract the zip file to a folder on your computer
4. Open Chrome → Settings → Extensions → Developer mode (toggle ON)
5. Click "Load unpacked" and select the extracted folder
6. The MCP Pointer extension should appear in your extensions list
7. **Reload web pages** to activate the extension
**Option B: Build from Source**
1. Clone this repository
2. Follow the build instructions in CONTRIBUTING.md
3. Open Chrome → Settings → Extensions → Developer mode (toggle ON)
4. Click "Load unpacked" and select the packages/chrome-extension/dist/ folder
5. **Reload web pages** to activate the extension
2. Configure MCP Server
One command setup for your AI tool:
Other AI Tools & Options
> **Optional:** You can install globally with npm install -g @mcp-pointer/server to use mcp-pointer instead of npx -y @mcp-pointer/server
After configuration, **restart your coding tool** to load the MCP connection.
> **🔄 Already using MCP Pointer?** Run the config command again to update to auto-updating configuration:
>
3. Start Using
1. **Navigate to any webpage**
2. **Option+Click** any element to select it
3. **Ask your AI** to analyze the targeted element!
Your AI tool will automatically start the MCP server when needed using the npx -y @mcp-pointer/server@latest start command.
**Available MCP Tool:**
- get-pointed-element – Returns textual information about the currently pointed DOM element. Optional arguments:
- 来源
- awesome · https://github.com/etsd-tech/mcp-pointer
- 按领域浏览
- MCP 服务
- Traction
- 598 ★
- 收录于
- 昨天
更多MCP 服务
所属领域与标签
每个标签都能点进去看同类的全部条目。数字是当前库里的真实条数。