Указывайте на элементы браузера DOM для инструментов агентного кодирования через MCP!

MCP Pointer — это локальный инструмент, объединяющий MCP-сервер с расширением для Chrome:

1. ** 🖥️ MCP Server** (Node.js пакет) — мосты между браузером и AI-инструментами через протокол Model Context Protocol
2. ** 🌐 Расширение для Chrome** — Захватывает выбор элементов DOM в браузере с помощью Option+Click

Расширение позволяет визуально выбирать элементы DOM в браузере, а сервер MCP делает этот текстовый контекст доступным для агентных инструментов кодирования, таких как Claude Code, Cursor и Windsurf, через стандартизированные инструменты MCP.

✨ Особенности

• 🎯 Option+Click Выбор - Просто удержите Option (Alt в Windows) и нажмите любой элемент
• 📋 Полные данные элементов - Текстовое содержимое, CSS-классы, HTML-атрибуты, позиционирование и стилизация
• 💡 Динамический контроль контекста — Запрос только видимого текста, полный подавление текста или набор CSS-деталей из нуля → полных вычисленных стилях для каждого вызова MCP
• ⚛️ React Component Detection — имена компонентов и исходные файлы через Fiber (экспериментальное)
• 🔗 WebSocket Connection - Связь в реальном времени между браузером и инструментами ИИ

👆 MCP Pointer

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.