MCP를 통해 에이전트 코딩 도구를 위한 브라우저 DOM 요소를 가리키세요!

MCP 포인터는 MCP 서버와 Chrome 확장 프로그램을 결합한 로컬 도구입니다:

1. ** 🖥️ MCP 서버** (Node.js 패키지) - 모델 컨텍스트 프로토콜을 통한 브라우저와 AI 도구 간의 다리 역할
2. ** 🌐 크롬 확장 프로그램** - [[T0]를 사용해 브라우저에서 DOM 요소 선택을 캡처합니다.

확장 프로그램은 브라우저에서 DOM 요소를 시각적으로 선택할 수 있게 해주며, MCP 서버는 이 텍스트 맥락을 Claude Code, Cursor, Windsurf 같은 에이전트 코딩 도구에 표준화된 MCP 도구를 통해 제공합니다.

✨ 특징

• 🎯 Option+Click 선택 - Option(Windows에서는 Alt)를 누르고 아무 요소든 클릭하세요
• 📋 완전한 요소 데이터 - 텍스트 내용, CSS 클래스, HTML 속성, 위치 지정 및 스타일링
• 💡 동적 컨텍스트 제어 - 보이는 텍스트만 요청, 텍스트 자체를 억제하거나 MCP 호출당 전체 계산 스타일→ CSS 세부 정보를 다이얼
• ⚛️ React 컴포넌트 감지 - 컴포넌트 이름 및 소스 파일 (실험적 장치)
• 🔗 WebSocket Connection - 브라우저와 AI 도구 간의 실시간 통신

👆 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.