เซิร์ฟเวอร์ MCP @mcp Pointer/server | PlugMCP
ข้ามไปยังเนื้อหา ไดเรกทอรี ผลิตภัณฑ์ แหล่งข้อมูล Pricing จากผู้เผยแพร่
เอกสารประกอบ MCP Server for DOM element pointing - WebSocket bridge for element targeting
เสียบเครื่องมือใดก็ได้เข้ากับเอเจนต์ใดก็ได้ ไดเรกทอรี MCP สำหรับคนที่ไม่เขียนเซิร์ฟเวอร์
ผลิตภัณฑ์
ไดเรกทอรี
นักพัฒนา
บริษัท
2026-10-28 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:
🖥️ MCP Server (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol
🌐 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) 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.
Option A: Download from Releases
Go to GitHub Releases
Download mcp-pointer-chrome-extension.zip from the latest release
Extract the zip file to a folder on your computer
Open Chrome → Settings → Extensions → Developer mode (toggle ON)
Click "Load unpacked" and select the extracted folder
The MCP Pointer extension should appear in your extensions list
Reload web pages to activate the extension
Option B: Build from Source
Clone this repository
Follow the build instructions in CONTRIBUTING.md
Open Chrome → Settings → Extensions → Developer mode (toggle ON)
Click "Load unpacked" and select the packages/chrome-extension/dist/ folder
Reload web pages to activate the extension
2. Configure MCP Server One command setup for your AI tool:
npx -y @mcp-pointer/server config claude # or cursor, windsurf, and others - see below
# For other AI tools
npx -y @mcp-pointer/server config cursor # Opens Cursor deeplink for automatic installation
npx -y @mcp-pointer/server config windsurf # Automatically updates Windsurf config file
npx -y @mcp-pointer/server config manual # Shows manual configuration for other tools
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:
npx -y @mcp-pointer/server config <your-tool> # Reconfigures to always use latest version
3. Start Using
Navigate to any webpage
Option+Click any element to select it
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.
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).
🎯 How It Works
Element Selection : Content script captures Option+Click events
Data Extraction : Analyzes element structure, CSS, and framework info
WebSocket Transport : Sends data to MCP server on port 7007
MCP Protocol : Makes data available to AI tools via MCP tools
AI Analysis : Your assistant can now see and analyze the element!
🎨 Element Data Extracted
Basic Info : Tag name, ID, classes, text content
CSS Properties : Display, position, colors, dimensions
Component Info : React component names and source files (experimental)
Attributes : All HTML attributes
Position : Exact coordinates and dimensions
Source Hints : File paths and component origins
🔍 Framework Support
⚛️ React - Component names and source files via Fiber (experimental)
📦 Generic HTML/CSS/JS - Full support for any web content
🔮 Planned - Vue component detection (PRs appreciated)
🌐 Browser Support
✅ Chrome - Full support (tested)
🟡 Chromium-based browsers - Should work (Edge, Brave, Arc - load built extension manually)
🐛 Troubleshooting
Extension Not Connecting
Make sure MCP server is running: npx -y @mcp-pointer/server@latest start
Check browser console for WebSocket errors
Verify port 7007 is not blocked by firewall
MCP Tools Not Available
Restart your AI assistant after installing
Check MCP configuration: mcp-pointer config <your-tool>
Verify server is running: npx -y @mcp-pointer/server@latest start
Elements Not Highlighting
Some pages block content scripts (chrome://, etc.)
Try refreshing the page
Check if targeting is enabled (click extension icon)
🚀 Roadmap
1. Dynamic Context Control
Full raw context transferred to server
LLM-configurable detail levels (visible text only, all text, CSS levels)
Progressive refinement options / token-conscious data fetching
2. Visual Content Support (for multimodal LLMs)
Base64 encoding for images (img tags)
Screenshot capture of selected elements
Separate MCP tool for direct visual content retrieval
3. Enhanced Framework Support
Vue.js component detection
Better React support (React 19 removed _debugSource, affecting source mapping in dev builds)
4. Multi Select
📝 License MIT License - see LICENSE file for details
🤝 Contributing We welcome contributions! Please see our CONTRIBUTING.md guide for development setup and guidelines.
Made with ❤️ for AI-powered web development
Now your AI can analyze any element you point at with Option+Click! 👆
คะแนนในไดเรกทอรี 2/100 อยู่ในรายการ 10 จาก 10
อยู่ใน MCP Registry ทางการ 0 จาก 18
ผู้ดูแลอ้างสิทธิ์แล้ว 0 จาก 8
ตอบกลับพร้อมรายการเครื่องมือ 0 จาก 12
ดาวบน GitHub 0 จาก 16
ยอดดาวน์โหลดรายสัปดาห์ 0 จาก 10
เซิร์ฟเวอร์ MCP ที่เกี่ยวข้อง DevOps Ohmyzsh 🙃 A delightful community-driven (with 2,500+ contributors) framework for managing your zsh configuration. Includes 300+ optional plugins (rails, git, macOS, hub, docker, homebrew, node, php, python Ruflo 🌊 The original agent harness. Deploy intelligent multi-player swarms, coordinate autonomous workflows, and build conversational AI systems. Features adaptive memory, self-learning intelligence, feder TrendRadar ⭐AI-driven public opinion & trend monitor with multi-platform aggregation, RSS, and smart alerts.🎯 告别信息过载,你的 AI 舆情监控助手与热点筛选工具!聚合多平台热点 + RSS 订阅,支持关键词精准筛选。AI 智能筛选新闻 + AI 翻译 + AI 分析简报直推手机,也支持接入 MCP 架构 Dbx 25 MB lightweight cross-platform database client for 100+ databases, including MySQL, PostgreSQL, SQLite, Redis, MongoDB, DuckDB, SQL Server, and Dameng. Built-in AI, MCP Server, CLI, desktop and Dock Docker Android Android in docker solution with noVNC supported, video recording, mcp server and AI-agent TREK The most complete open-source travel planner: real-time collaboration, bookings, budgets, packing lists, journals, offline PWA, SSO and an AI-ready MCP server, with planet-wide place search and routin Pansou PanSou是一款高性能的网盘资源搜索API服务,支持TG频道和插件搜索。系统设计以性能和可扩展性为核心,支持多频道多插件并发搜索、结果智能排序和网盘类型分类。docker集成前后端,一键启动,开箱即用。仅供学习研究,请勿以各种形式用于盈利目的。 https://t.me/s/webhtv XHS Downloader 小红书(XiaoHongShu、RedNote)链接提取/作品采集工具 Nginx Ui Yet another WebUI for Nginx Tyk Open Source API and AI Gateway supporting REST, GraphQL, TCP, gRPC and MCP (Model Context Protocol) Openstatus Open-source status page, incident response and uptime monitoring Dashboard Icons 3,400+ curated icons and logos for dashboards and AI agents. SVG, PNG and WEBP on a free CDN, plus an MCP server for Claude Code, Codex, ChatGPT, Cursor, Hermes and OpenClaw. เซิร์ฟเวอร์ MCP หมวด DevOps เซิร์ฟเวอร์ MCP ที่ดีที่สุดในหมวด DevOps azure-compute Azure VM/VMSS router. WHEN: create / provision / deploy / spin-up VM, recommend VM size, compare VM pricing, VMSS, scale set, autoscale, burstable, lightweight server, website, backend, GPU, machine l self-hosted-funnel-launch Deploy a self-hosted funnel builder, take a funnel from empty install to published - landing page, checkout, one-click upsell, thank-you - and drive it from an agent over MCP. Covers deploying to Clou
ยังไม่มีรายการเครื่องมือ เซิร์ฟเวอร์แบบรีโมตจะได้รายการหลังการตรวจสอบสถานะครั้งแรก
ติดตั้ง @mcp Pointer/server อย่างไร? คัดลอกคอนฟิก stdio สำหรับ Cursor, Claude Desktop, Claude Code หรือ VS Code ได้ในหน้านี้ คอนฟิกนี้ใช้การติดตั้งของผู้เผยแพร่ ไม่ใช่พร็อกซีของ PlugMCP
@mcp Pointer/server ต้องใช้ API key ไหม? ระเบียนนี้ไม่ได้ระบุตัวแปรสภาพแวดล้อมที่จำเป็น
@mcp Pointer/server ใช้ทรานสปอร์ตแบบใด? @mcp Pointer/server ทำงานแบบโลคัลผ่าน stdio
@mcp Pointer/server ถูกตรวจสอบล่าสุดเมื่อใด? ตรวจสอบล่าสุดเมื่อ 2026-10-28 MCP Server for DOM element pointing - WebSocket bridge for element targeting
เครื่องมือมีคำอธิบาย 0 จาก 6