etsd-tech/mcp-pointer
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
MCPツール:お気に入りのエージェントコーディングツールのDOM要素を指し示せるようにしましょう。AIにあなたが見たものを見せましょう。
概要
MCP Pointerは、MCPサーバーとChrome拡張機能を組み合わせたローカルツールです: 1. (Node.jsパッケージ) - モデルコンテキストプロトコルを介してブラウザとAIツール間の橋渡し 2.- Option+Clickを使ってブラウザ上でDOM要素の選択をキャプチャ この拡張機能はブラウザ内でDOM要素を視覚的に選択でき、MCPサーバーはClaude Code、Cursor、Windsurfなどのエージェントコーディングツールを標準化されたMCPツールを通じて利用可能にします。 - 🎯 - Option(WindowsではAlt)を押しながら任意の要素をクリックする - 📋 - テキスト内容、CSSクラス、HTML属性、位置設定、スタイリング - 💡 - 見えるだけのテキストを要求、テキストを完全に抑制するか、MCP呼び出しごとに完全な計算スタイル→CSSの詳細をダイヤル - ⚛️ - コンポーネント名とソースファイルをFiber経由で(実験的) - 🔗 ブラウザとAIツール間のリアルタイム通信 - 🤖 - Claudeコードやその他のMCP対応AIツールと連携 https://github.
概要（AI 翻訳）
MCP経由でエージェントコーディングツール用のブラウザDOM要素を指す!
MCP Pointerは、MCPサーバーとChrome拡張機能を組み合わせたローカルツールです:
- ** 🖥️ MCPサーバー**(Node.jsパッケージ) - モデルコンテキストプロトコルを介したブラウザとAIツール間の橋渡し
- ** 🌐 Chrome拡張機能** - ブラウザ上でDOM要素の選択を
Option+Clickでキャプチャします。
この拡張機能はブラウザ内でDOM要素を視覚的に選択でき、MCPサーバーはこのテキストコンテキストをClaude Code、Cursor、Windsurfなどのエージェントコーディングツールで標準化されたMCPツールを通じて利用可能にします。
✨ 特徴
- 🎯
Option+Click選択 -Option(WindowsではAlt)を長押しして任意の要素をクリックするだけです - 📋 完全要素データ - テキスト内容、CSSクラス、HTML属性、位置、スタイリング
- 💡 動的コンテキスト制御 - 可視のみのテキストを要求、テキストを完全に抑制する、またはMCPコールごとに完全な計算スタイル→からCSS詳細をダイヤルする
- ⚛️ Reactコンポーネント検出 - ファイバーを使ったコンポーネント名とソースファイル(実験的データ)
- 🔗 WebSocket Connection - ブラウザとAIツール間のリアルタイム通信
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
👆 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:
- 🖥️ 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+ClickSelection - Simply holdOption(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.
インストール
npx -y @mcp-pointer/server config claude # or cursor, windsurf, and others - see below