[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-etsd-tech--mcp-pointer":3,"tool-etsd-tech--mcp-pointer":62},[4,18,26,36,46,54],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",159267,2,"2026-04-17T11:29:14",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":42,"last_commit_at":43,"category_tags":44,"status":17},8272,"opencode","anomalyco\u002Fopencode","OpenCode 是一款开源的 AI 编程助手（Coding Agent），旨在像一位智能搭档一样融入您的开发流程。它不仅仅是一个代码补全插件，而是一个能够理解项目上下文、自主规划任务并执行复杂编码操作的智能体。无论是生成全新功能、重构现有代码，还是排查难以定位的 Bug，OpenCode 都能通过自然语言交互高效完成，显著减少开发者在重复性劳动和上下文切换上的时间消耗。\n\n这款工具专为软件开发者、工程师及技术研究人员设计，特别适合希望利用大模型能力来提升编码效率、加速原型开发或处理遗留代码维护的专业人群。其核心亮点在于完全开源的架构，这意味着用户可以审查代码逻辑、自定义行为策略，甚至私有化部署以保障数据安全，彻底打破了传统闭源 AI 助手的“黑盒”限制。\n\n在技术体验上，OpenCode 提供了灵活的终端界面（Terminal UI）和正在测试中的桌面应用程序，支持 macOS、Windows 及 Linux 全平台。它兼容多种包管理工具，安装便捷，并能无缝集成到现有的开发环境中。无论您是追求极致控制权的资深极客，还是渴望提升产出的独立开发者，OpenCode 都提供了一个透明、可信",144296,1,"2026-04-16T14:50:03",[13,45],"插件",{"id":47,"name":48,"github_repo":49,"description_zh":50,"stars":51,"difficulty_score":32,"last_commit_at":52,"category_tags":53,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":55,"name":56,"github_repo":57,"description_zh":58,"stars":59,"difficulty_score":32,"last_commit_at":60,"category_tags":61,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[45,13,15,14],{"id":63,"github_repo":64,"name":65,"description_en":66,"description_zh":67,"ai_summary_zh":68,"readme_en":69,"readme_zh":70,"quickstart_zh":71,"use_case_zh":72,"hero_image_url":73,"owner_login":74,"owner_name":75,"owner_avatar_url":76,"owner_bio":77,"owner_company":78,"owner_location":78,"owner_email":79,"owner_twitter":78,"owner_website":75,"owner_url":80,"languages":81,"stars":98,"forks":99,"last_commit_at":100,"license":101,"difficulty_score":32,"env_os":102,"env_gpu":103,"env_ram":103,"env_deps":104,"category_tags":109,"github_topics":110,"view_count":32,"oss_zip_url":78,"oss_zip_packed_at":78,"status":17,"created_at":121,"updated_at":122,"faqs":123,"releases":124},8626,"etsd-tech\u002Fmcp-pointer","mcp-pointer","MCP tool: let you point at DOM elements for your favorite agentic coding tool. Let AI see what you see.","mcp-pointer 是一款专为智能编程助手设计的本地化桥梁工具，旨在让 AI 真正“看见”你在浏览器中看到的内容。它通过结合一个 Chrome 扩展程序和一个基于 Node.js 的 MCP 服务器，解决了传统 AI 编码工具难以精准理解网页具体元素上下文的问题。\n\n在使用时，开发者只需在浏览器中按住 Option 键（Windows 为 Alt）并点击任意页面元素，mcp-pointer 即可瞬间捕获该元素的完整信息，包括文本内容、CSS 样式、HTML 属性、位置坐标甚至 React 组件名称（实验性功能）。这些视觉信息会被转化为结构化的文本上下文，通过标准的模型上下文协议（MCP）实时传递给 Claude Code、Cursor 或 Windsurf 等智能编程工具。\n\n这款工具特别适合前端开发者、全栈工程师以及正在使用 Agentic Coding（代理式编程）工作流的技术人员。它能显著减少向 AI 描述界面问题时的沟通成本，让 AI 直接基于你选中的元素提供精准的代码修改建议或调试方案。其独特的动态上下文控制功能，允许用户按需调整获取信息的详细程度，而基于 WebSock","mcp-pointer 是一款专为智能编程助手设计的本地化桥梁工具，旨在让 AI 真正“看见”你在浏览器中看到的内容。它通过结合一个 Chrome 扩展程序和一个基于 Node.js 的 MCP 服务器，解决了传统 AI 编码工具难以精准理解网页具体元素上下文的问题。\n\n在使用时，开发者只需在浏览器中按住 Option 键（Windows 为 Alt）并点击任意页面元素，mcp-pointer 即可瞬间捕获该元素的完整信息，包括文本内容、CSS 样式、HTML 属性、位置坐标甚至 React 组件名称（实验性功能）。这些视觉信息会被转化为结构化的文本上下文，通过标准的模型上下文协议（MCP）实时传递给 Claude Code、Cursor 或 Windsurf 等智能编程工具。\n\n这款工具特别适合前端开发者、全栈工程师以及正在使用 Agentic Coding（代理式编程）工作流的技术人员。它能显著减少向 AI 描述界面问题时的沟通成本，让 AI 直接基于你选中的元素提供精准的代码修改建议或调试方案。其独特的动态上下文控制功能，允许用户按需调整获取信息的详细程度，而基于 WebSocket 的实时通信则确保了交互的流畅性。作为开源项目，mcp-pointer 以轻量、本地运行的方式，极大地提升了人机协作开发网页应用的效率。","\u003Cimg width=\"1440\" height=\"480\" alt=\"MCP Pointer banner\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fetsd-tech_mcp-pointer_readme_afca47e26ace.png\" \u002F>\n\n[![CI](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg?branch=main)](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Factions\u002Fworkflows\u002Fci.yml)\n[![Release](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Factions\u002Fworkflows\u002Frelease.yml\u002Fbadge.svg?branch=main)](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Factions\u002Fworkflows\u002Frelease.yml)\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@mcp-pointer\u002Fserver?label=Server)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mcp-pointer\u002Fserver)\n[![Chrome Extension](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fpackage-json\u002Fv\u002Fetsd-tech\u002Fmcp-pointer?filename=packages%2Fchrome-extension%2Fpackage.json&label=Chrome-Extension)](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Freleases)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fetsd-tech\u002Fmcp-pointer?label=License)](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Fblob\u002Fmain\u002FLICENSE)\n\n# 👆 MCP Pointer\n\n**Point to browser DOM elements for agentic coding tools via MCP!**\n\nMCP Pointer is a *local* tool combining an MCP Server with a Chrome Extension:\n\n1. **🖥️ MCP Server** (Node.js package) - Bridges between the browser and AI tools via the Model Context Protocol\n2. **🌐 Chrome Extension** - Captures DOM element selections in the browser using `Option+Click`\n\nThe 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.\n\n## ✨ Features\n\n- 🎯 **`Option+Click` Selection** - Simply hold `Option` (Alt on Windows) and click any element\n- 📋 **Complete Element Data** - Text content, CSS classes, HTML attributes, positioning, and styling\n- 💡 **Dynamic Context Control** - Request visible-only text, suppress text entirely, or dial CSS detail from none → full computed styles per MCP call\n- ⚛️ **React Component Detection** - Component names and source files via Fiber (experimental)\n- 🔗 **WebSocket Connection** - Real-time communication between browser and AI tools\n- 🤖 **MCP Compatible** - Works with Claude Code and other MCP-enabled AI tools\n\n## 🎬 Usage example (video)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F98c4adf6-1f05-4c9b-be41-0416ab784e2c\n\nSee 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.\n\n## 🚀 Getting Started\n\n### 1. Install Chrome Extension\n\n**🎉 Now available on Chrome Web Store!**\n\n[![Install from Chrome Web Store](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FChrome_Web_Store-Install-blue?style=for-the-badge&logo=google-chrome)](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-pointer\u002Fjfhgaembhafbffidedhpkmnaajdfeiok)\n\nSimply click the link above to install from the Chrome Web Store.\n\n\u003Cdetails>\n\u003Csummary>Alternative: Manual Installation\u003C\u002Fsummary>\n\n**Option A: Download from Releases**\n\n1. Go to [GitHub Releases](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Freleases)\n2. Download `mcp-pointer-chrome-extension.zip` from the latest release\n3. Extract the zip file to a folder on your computer\n4. Open Chrome → Settings → Extensions → Developer mode (toggle ON)\n5. Click \"Load unpacked\" and select the extracted folder\n6. The MCP Pointer extension should appear in your extensions list\n7. **Reload web pages** to activate the extension\n\n**Option B: Build from Source**\n\n1. Clone this repository\n2. Follow the build instructions in [CONTRIBUTING.md](.\u002FCONTRIBUTING.md)\n3. Open Chrome → Settings → Extensions → Developer mode (toggle ON)\n4. Click \"Load unpacked\" and select the `packages\u002Fchrome-extension\u002Fdist\u002F` folder\n5. **Reload web pages** to activate the extension\n\n\u003C\u002Fdetails>\n\n### 2. Configure MCP Server\n\nOne command setup for your AI tool:\n\n```bash\nnpx -y @mcp-pointer\u002Fserver config claude  # or cursor, windsurf, and others - see below\n```\n\n\u003Cdetails>\n\u003Csummary>Other AI Tools & Options\u003C\u002Fsummary>\n\n```bash\n# For other AI tools\nnpx -y @mcp-pointer\u002Fserver config cursor     # Opens Cursor deeplink for automatic installation\nnpx -y @mcp-pointer\u002Fserver config windsurf   # Automatically updates Windsurf config file\nnpx -y @mcp-pointer\u002Fserver config manual     # Shows manual configuration for other tools\n```\n\n> **Optional:** You can install globally with `npm install -g @mcp-pointer\u002Fserver` to use `mcp-pointer` instead of `npx -y @mcp-pointer\u002Fserver`\n\n\u003C\u002Fdetails>\n\nAfter configuration, **restart your coding tool** to load the MCP connection.\n\n> **🔄 Already using MCP Pointer?** Run the config command again to update to auto-updating configuration:\n> ```bash\n> npx -y @mcp-pointer\u002Fserver config \u003Cyour-tool>  # Reconfigures to always use latest version\n> ```\n\n### 3. Start Using\n\n1. **Navigate to any webpage** \n2. **`Option+Click`** any element to select it\n3. **Ask your AI** to analyze the targeted element!\n\nYour AI tool will automatically start the MCP server when needed using the `npx -y @mcp-pointer\u002Fserver@latest start` command.\n\n**Available MCP Tool:**\n- `get-pointed-element` – Returns textual information about the currently pointed DOM element. Optional arguments:\n  - `textDetail`: `0 | 1 | 2` (default `2`) controls how much text to include (`0 = none`, `1 = visible text only`, `2 = visible + hidden`).\n  - `cssLevel`: `0 | 1 | 2 | 3` (default `1`) controls styling detail, from no CSS (0) up to full computed styles (3).\n\n## 🎯 How It Works\n\n1. **Element Selection**: Content script captures `Option+Click` events\n2. **Data Extraction**: Analyzes element structure, CSS, and framework info\n3. **WebSocket Transport**: Sends data to MCP server on port 7007\n4. **MCP Protocol**: Makes data available to AI tools via MCP tools\n5. **AI Analysis**: Your assistant can now see and analyze the element!\n\n## 🎨 Element Data Extracted\n\n- **Basic Info**: Tag name, ID, classes, text content\n- **CSS Properties**: Display, position, colors, dimensions\n- **Component Info**: React component names and source files (experimental)  \n- **Attributes**: All HTML attributes\n- **Position**: Exact coordinates and dimensions\n- **Source Hints**: File paths and component origins\n\n## 🔍 Framework Support\n\n- ⚛️ **React** - Component names and source files via Fiber (experimental)\n- 📦 **Generic HTML\u002FCSS\u002FJS** - Full support for any web content\n- 🔮 **Planned** - Vue component detection (PRs appreciated)\n\n## 🌐 Browser Support\n\n- ✅ **Chrome** - Full support (tested)\n- 🟡 **Chromium-based browsers** - Should work (Edge, Brave, Arc - load built extension manually)\n\n## 🐛 Troubleshooting\n\n### Extension Not Connecting\n\n1. Make sure MCP server is running: `npx -y @mcp-pointer\u002Fserver@latest start`\n2. Check browser console for WebSocket errors\n3. Verify port 7007 is not blocked by firewall\n\n### MCP Tools Not Available\n\n1. Restart your AI assistant after installing\n2. Check MCP configuration: `mcp-pointer config \u003Cyour-tool>`  \n3. Verify server is running: `npx -y @mcp-pointer\u002Fserver@latest start`\n\n### Elements Not Highlighting\n\n1. Some pages block content scripts (chrome:\u002F\u002F, etc.)\n2. Try refreshing the page\n3. Check if targeting is enabled (click extension icon)\n\n## 🚀 Roadmap\n\n### 1. **Dynamic Context Control**\n   - Full raw context transferred to server\n   - LLM-configurable detail levels (visible text only, all text, CSS levels)\n   - Progressive refinement options \u002F token-conscious data fetching\n\n### 2. **Visual Content Support** (for multimodal LLMs)\n   - Base64 encoding for images (img tags)\n   - Screenshot capture of selected elements\n   - Separate MCP tool for direct visual content retrieval\n\n### 3. **Enhanced Framework Support**\n   - Vue.js component detection\n   - Better React support (React 19 removed `_debugSource`, affecting source mapping in dev builds)\n\n### 4. **Multi Select**\n   - Having the ability to select multiple DOM elements\n   - https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Fpull\u002F9\n\n## 📝 License\n\nMIT License - see LICENSE file for details\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [CONTRIBUTING.md](.\u002FCONTRIBUTING.md) guide for development setup and guidelines.\n\n---\n\n*Inspired by tools like [Click-to-Component](https:\u002F\u002Fgithub.com\u002Fericclemmons\u002Fclick-to-component) for component development workflows.*\n\n---\n\n**Made with ❤️ for AI-powered web development**\n\n*Now your AI can analyze any element you point at with `Option+Click`! 👆*\n","\u003Cimg width=\"1440\" height=\"480\" alt=\"MCP Pointer banner\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fetsd-tech_mcp-pointer_readme_afca47e26ace.png\" \u002F>\n\n[![CI](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg?branch=main)](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Factions\u002Fworkflows\u002Fci.yml)\n[![Release](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Factions\u002Fworkflows\u002Frelease.yml\u002Fbadge.svg?branch=main)](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Factions\u002Fworkflows\u002Frelease.yml)\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@mcp-pointer\u002Fserver?label=Server)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mcp-pointer\u002Fserver)\n[![Chrome Extension](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fpackage-json\u002Fv\u002Fetsd-tech\u002Fmcp-pointer?filename=packages%2Fchrome-extension%2Fpackage.json&label=Chrome-Extension)](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Freleases)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fetsd-tech\u002Fmcp-pointer?label=License)](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Fblob\u002Fmain\u002FLICENSE)\n\n# 👆 MCP Pointer\n\n**通过 MCP 将浏览器 DOM 元素指向代理式编码工具！**\n\nMCP Pointer 是一款结合了 MCP 服务器和 Chrome 扩展的 *本地* 工具：\n\n1. **🖥️ MCP 服务器**（Node.js 包）——通过模型上下文协议连接浏览器与 AI 工具\n2. **🌐 Chrome 扩展**——使用 `Option+Click` 捕获浏览器中的 DOM 元素选择\n\n该扩展允许您在浏览器中直观地选择 DOM 元素，而 MCP 服务器则通过标准化的 MCP 工具将这些 **文本上下文** 提供给 Claude Code、Cursor 和 Windsurf 等代理式编码工具。\n\n## ✨ 特性\n\n- 🎯 **`Option+Click` 选择**——只需按住 `Option` 键（Windows 上为 Alt 键），然后单击任意元素\n- 📋 **完整元素数据**——文本内容、CSS 类、HTML 属性、位置信息和样式\n- 💡 **动态上下文控制**——可请求仅显示可见文本、完全抑制文本，或根据每次 MCP 调用调整 CSS 详细程度，从无到完整的计算样式\n- ⚛️ **React 组件检测**——通过 Fiber 检测组件名称和源文件（实验性）\n- 🔗 **WebSocket 连接**——浏览器与 AI 工具之间的实时通信\n- 🤖 **MCP 兼容**——可与 Claude Code 及其他支持 MCP 的 AI 工具配合使用\n\n## 🎬 使用示例（视频）\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F98c4adf6-1f05-4c9b-be41-0416ab784e2c\n\n观看 MCP Pointer 的实际操作：在浏览器中使用 `Option+Click` 选择任意元素，然后向您的代理式编码工具提问（本例中为 Claude Code）。AI 将获得所选 DOM 元素的完整文本上下文，包括 CSS 属性、URL、选择器等信息。\n\n## 🚀 快速入门\n\n### 1. 安装 Chrome 扩展\n\n**🎉 现已在 Chrome 网上应用店上线！**\n\n[![从 Chrome 网上应用店安装](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FChrome_Web_Store-Install-blue?style=for-the-badge&logo=google-chrome)](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-pointer\u002Fjfhgaembhafbffidedhpkmnaajdfeiok)\n\n只需点击上方链接即可从 Chrome 网上应用店安装。\n\n\u003Cdetails>\n\u003Csummary>替代方案：手动安装\u003C\u002Fsummary>\n\n**选项 A：从发布页面下载**\n\n1. 访问 [GitHub 发布页面](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Freleases)\n2. 下载最新版本中的 `mcp-pointer-chrome-extension.zip`\n3. 将压缩包解压到电脑上的一个文件夹\n4. 打开 Chrome → 设置 → 扩展程序 → 开发者模式（开启）\n5. 点击“加载已解压的扩展程序”，并选择解压后的文件夹\n6. MCP Pointer 扩展应出现在您的扩展列表中\n7. **重新加载网页**以激活扩展\n\n**选项 B：从源代码构建**\n\n1. 克隆此仓库\n2. 按照 [CONTRIBUTING.md](.\u002FCONTRIBUTING.md) 中的构建说明操作\n3. 打开 Chrome → 设置 → 扩展程序 → 开发者模式（开启）\n4. 点击“加载已解压的扩展程序”，并选择 `packages\u002Fchrome-extension\u002Fdist\u002F` 文件夹\n5. **重新加载网页**以激活扩展\n\n\u003C\u002Fdetails>\n\n### 2. 配置 MCP 服务器\n\n只需一条命令即可为您的 AI 工具完成设置：\n\n```bash\nnpx -y @mcp-pointer\u002Fserver config claude  # 或 cursor、windsurf 等 - 见下文\n```\n\n\u003Cdetails>\n\u003Csummary>其他 AI 工具及选项\u003C\u002Fsummary>\n\n```bash\n# 对于其他 AI 工具\nnpx -y @mcp-pointer\u002Fserver config cursor     # 打开 Cursor 的深度链接以自动安装\nnpx -y @mcp-pointer\u002Fserver config windsurf   # 自动更新 Windsurf 的配置文件\nnpx -y @mcp-pointer\u002Fserver config manual     # 显示其他工具的手动配置\n```\n\n> **可选：** 您也可以通过 `npm install -g @mcp-pointer\u002Fserver` 全局安装，之后便可以直接使用 `mcp-pointer` 命令，而无需再输入 `npx -y @mcp-pointer\u002Fserver`。\n\n配置完成后，请 **重启您的编码工具** 以加载 MCP 连接。\n\n> **🔄 已经在使用 MCP Pointer 吗？** 再次运行配置命令即可更新为自动更新的配置：\n> ```bash\n> npx -y @mcp-pointer\u002Fserver config \u003Cyour-tool>  # 重新配置以始终使用最新版本\n> ```\n\n### 3. 开始使用\n\n1. **导航到任意网页**\n2. **`Option+Click`** 任意元素以进行选择\n3. **向您的 AI 提问**，让它分析所选元素！\n\n您的 AI 工具会在需要时自动启动 MCP 服务器，执行命令 `npx -y @mcp-pointer\u002Fserver@latest start`。\n\n**可用的 MCP 工具：**\n- `get-pointed-element`——返回当前指向的 DOM 元素的文本信息。可选参数：\n  - `textDetail`: `0 | 1 | 2`（默认值为 `2`），用于控制包含多少文本内容（`0 = 无`, `1 = 仅可见文本`, `2 = 可见 + 隐藏`）。\n  - `cssLevel`: `0 | 1 | 2 | 3`（默认值为 `1`），用于控制样式细节，从不包含任何 CSS（0）到完整的计算样式（3）。\n\n## 🎯 工作原理\n\n1. **元素选择**：内容脚本捕获 `Option+Click` 事件\n2. **数据提取**：分析元素结构、CSS 及框架相关信息\n3. **WebSocket 传输**：将数据发送至端口 7007 的 MCP 服务器\n4. **MCP 协议**：通过 MCP 工具将数据提供给 AI 工具\n5. **AI 分析**：您的助手现在可以查看并分析该元素！\n\n## 🎨 提取的元素数据\n\n- **基本信息**：标签名、ID、类名、文本内容\n- **CSS 属性**：显示方式、定位、颜色、尺寸\n- **组件信息**：React 组件名称和源文件（实验性）\n- **属性**：所有 HTML 属性\n- **位置**：精确坐标和尺寸\n- **源码提示**：文件路径和组件来源\n\n## 🔍 框架支持\n\n- ⚛️ **React**——通过 Fiber 检测组件名称和源文件（实验性）\n- 📦 **通用 HTML\u002FCSS\u002FJS**——全面支持任何网页内容\n- 🔮 **计划中**——Vue 组件检测（欢迎提交 PR）\n\n## 🌐 浏览器支持\n\n- ✅ **Chrome**——全面支持（已测试）\n- 🟡 **基于 Chromium 的浏览器**——应该可以正常工作（Edge、Brave、Arc——需手动加载编译好的扩展）\n\n## 🐛 故障排除\n\n### 扩展无法连接\n\n1. 确保 MCP 服务器正在运行：`npx -y @mcp-pointer\u002Fserver@latest start`\n2. 检查浏览器控制台是否有 WebSocket 错误\n3. 确认端口 7007 没有被防火墙阻止\n\n### MCP 工具不可用\n\n1. 安装后请重启您的 AI 助手  \n2. 检查 MCP 配置：`mcp-pointer config \u003Cyour-tool>`  \n3. 确认服务器正在运行：`npx -y @mcp-pointer\u002Fserver@latest start`\n\n### 元素无法高亮显示\n\n1. 某些页面会阻止内容脚本（如 chrome:\u002F\u002F 等）  \n2. 尝试刷新页面  \n3. 检查是否已启用目标模式（点击扩展程序图标）\n\n## 🚀 路线图\n\n### 1. **动态上下文控制**\n   - 将完整原始上下文传输至服务器  \n   - 可由 LLM 配置的细节级别（仅可见文本、全部文本、CSS 层次）  \n   - 渐进式细化选项 \u002F 基于 token 数量的数据获取策略  \n\n### 2. **视觉内容支持**（适用于多模态 LLM）\n   - 对图片（img 标签）进行 Base64 编码  \n   - 截取选定元素的屏幕截图  \n   - 提供独立的 MCP 工具，用于直接获取视觉内容  \n\n### 3. **增强框架支持**\n   - Vue.js 组件检测  \n   - 更好的 React 支持（React 19 移除了 `_debugSource`，影响开发构建中的源映射）  \n\n### 4. **多选功能**\n   - 支持同时选择多个 DOM 元素  \n   - https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Fpull\u002F9  \n\n## 📝 许可证\n\nMIT 许可证 - 详情请参阅 LICENSE 文件  \n\n## 🤝 贡献\n\n我们欢迎各类贡献！请查阅我们的 [CONTRIBUTING.md](.\u002FCONTRIBUTING.md) 指南，了解开发环境搭建及贡献规范。\n\n---\n\n*受类似 [Click-to-Component](https:\u002F\u002Fgithub.com\u002Fericclemmons\u002Fclick-to-component) 这类工具启发，旨在优化组件开发流程。*\n\n---\n\n**专为 AI 驱动的 Web 开发而打造 ❤️**\n\n*现在，只需按住 Option 键并单击，您的 AI 就能分析您指向的任何元素啦！👆*","# MCP Pointer 快速上手指南\n\nMCP Pointer 是一款本地工具，通过组合 **MCP Server** 与 **Chrome 扩展**，让你只需在浏览器中按下 `Option` (Windows 为 `Alt`) 并点击任意元素，即可将完整的 DOM 上下文（包括样式、属性、React 组件信息等）提供给 Claude Code、Cursor、Windsurf 等 AI 编程助手。\n\n## 环境准备\n\n*   **操作系统**: macOS, Windows, Linux\n*   **浏览器**: Google Chrome (推荐) 或其他 Chromium 内核浏览器 (如 Edge, Brave)\n*   **运行环境**: \n    *   Node.js (用于运行 MCP Server)\n    *   npm 或 npx (Node 包管理器)\n*   **AI 工具**: 已安装并支持 MCP 协议的编程助手 (如 Claude Code, Cursor, Windsurf)\n\n## 安装步骤\n\n### 1. 安装 Chrome 扩展\n\n**推荐方式：从 Chrome 网上应用店安装**\n直接访问 [Chrome Web Store](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-pointer\u002Fjfhgaembhafbffidedhpkmnaajdfeiok) 点击“添加至 Chrome\"。\n\n**备选方式：手动加载（适用于无法访问商店的用户）**\n1. 前往 [GitHub Releases](https:\u002F\u002Fgithub.com\u002Fetsd-tech\u002Fmcp-pointer\u002Freleases) 下载最新版的 `mcp-pointer-chrome-extension.zip`。\n2. 解压文件到本地文件夹。\n3. 在 Chrome 地址栏输入 `chrome:\u002F\u002Fextensions\u002F`，开启右上角的 **“开发者模式”**。\n4. 点击 **“加载已解压的扩展程序”**，选择刚才解压的文件夹。\n5. **刷新** 需要使用的网页以激活扩展。\n\n### 2. 配置 MCP Server\n\n根据你的 AI 工具，在终端运行以下命令进行自动配置：\n\n```bash\n# 针对 Claude Code\nnpx -y @mcp-pointer\u002Fserver config claude\n\n# 针对 Cursor\nnpx -y @mcp-pointer\u002Fserver config cursor\n\n# 针对 Windsurf\nnpx -y @mcp-pointer\u002Fserver config windsurf\n\n# 其他工具查看手动配置\nnpx -y @mcp-pointer\u002Fserver config manual\n```\n\n> **提示**: 配置完成后，请**重启你的 AI 编程工具**以加载新的 MCP 连接。\n\n## 基本使用\n\n1.  **打开网页**: 在 Chrome 中导航至任意你想要分析的网页。\n2.  **选择元素**: 按住键盘上的 `Option` 键 (Windows\u002FLinux 为 `Alt` 键)，同时用鼠标**点击**页面上的任意元素。\n    *   此时该元素会被选中，数据已捕获。\n3.  **询问 AI**: 在你的 AI 编程助手对话框中直接提问。\n    *   *示例*: \"分析我刚刚选中的这个按钮的样式和结构。\"\n    *   *示例*: \"这个 React 组件的源文件在哪里？\"\n\nAI 工具会自动调用 `get-pointed-element` 工具获取你选中元素的详细文本上下文（包含 CSS 类、内联样式、坐标、文本内容等），无需额外启动命令，服务器会在需要时自动运行。","前端开发者小李正在调试一个复杂的 React 电商后台，需要快速定位并修复某个深层嵌套按钮的样式错位问题。\n\n### 没有 mcp-pointer 时\n- **沟通成本高昂**：小李必须手动复制冗长的 CSS 选择器或截图，并在对话框中费力描述“那个在第三行、带红色边框的提交按钮”，AI 经常理解偏差。\n- **上下文缺失**：AI 无法直接感知页面上的实际渲染效果，只能基于代码文件猜测，导致生成的修复方案往往忽略了动态计算的样式或继承属性。\n- **操作繁琐低效**：为了提供足够信息，开发者需反复切换窗口，使用浏览器开发者工具层层展开 DOM 树，手动提取类名和属性，打断心流。\n- **React 组件黑盒**：面对封装良好的组件，难以快速告知 AI 具体是哪个源文件中的组件实例出了问题，排查路径曲折。\n\n### 使用 mcp-pointer 后\n- **所指即所得**：小李只需按住 `Option` 键点击目标按钮，mcp-pointer 瞬间将完整的 DOM 结构、计算后的 CSS 样式及屏幕坐标转化为文本上下文发送给 AI。\n- **精准诊断修复**：AI 直接“看见”了元素的真实状态（包括隐藏属性和动态类名），立即给出精确到像素的样式修正代码，无需多轮澄清。\n- **流程无缝衔接**：整个交互在秒级内完成，开发者无需离开浏览器或手动复制粘贴，保持了高度的专注与流畅的开发节奏。\n- **深度框架感知**：借助实验性功能，mcp-pointer 还能识别并传递该按钮对应的 React 组件名称及源文件路径，让 AI 直接从组件逻辑层面提供解决方案。\n\nmcp-pointer 通过打通视觉选择与代码上下文的壁垒，让 AI 真正拥有了“眼睛”，将模糊的自然语言描述转变为精准的工程化指令。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fetsd-tech_mcp-pointer_afca47e2.png","etsd-tech","etsd.tech","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fetsd-tech_5d19d60b.png","",null,"elie@etsd.tech","https:\u002F\u002Fgithub.com\u002Fetsd-tech",[82,86,90,94],{"name":83,"color":84,"percentage":85},"TypeScript","#3178c6",83.4,{"name":87,"color":88,"percentage":89},"CSS","#663399",11.8,{"name":91,"color":92,"percentage":93},"JavaScript","#f1e05a",3.6,{"name":95,"color":96,"percentage":97},"HTML","#e34c26",1.2,571,56,"2026-04-13T14:47:30","MIT","macOS, Windows, Linux","未说明",{"notes":105,"python":103,"dependencies":106},"该工具基于 Node.js 和 Chrome 扩展程序，无需 Python 环境。核心组件包括：1. MCP Server (Node.js 包)，通过 npx 运行；2. Chrome 扩展程序。支持 macOS (Option+Click)、Windows (Alt+Click) 和 Linux。需确保端口 7007 未被防火墙阻止以建立 WebSocket 连接。主要适配 Claude Code、Cursor、Windsurf 等 AI 编程工具。",[107,108],"Node.js (运行 npx)","Google Chrome 或 Chromium 内核浏览器",[45,13],[111,112,113,114,115,116,117,118,119,120],"agentic-coding","browser","claude-code","cursor","dom","dom-element","mcp","mcp-server","pointing","stdio","2026-03-27T02:49:30.150509","2026-04-18T02:20:34.014507",[],[125,130,134,139,143,148,152,157,161,166,170,175,179,184,188,193],{"id":126,"version":127,"summary_zh":128,"released_at":129},314539,"@mcp-pointer\u002Fserver@0.6.0","### 小幅改动\n\n-   ca7a516：**架构清理与改进**\n\n    -   **服务器端**：将完整的 CSS 属性存储在 `cssProperties` 中，而非仅筛选前 5 个属性\n    -   **服务器端**：移除对 LEGACY_ELEMENT_SELECTED 的支持——现仅支持 DOM_ELEMENT_POINTED\n    -   **服务器端**：删除未使用的文件（`mcp-handler.ts`、`websocket-server.ts`）\n    -   **服务器端**：简化类型定义——移除 `StateDataV1` 和 `LegacySharedState`\n    -   **服务器端**：动态 CSS 筛选现将在调用 MCP 工具时根据 `cssLevel` 参数实时进行\n\n    这样一来，无需重新指向元素即可访问完整的 CSS 详情，而筛选工作则由服务器端根据工具参数自动完成。","2025-11-12T15:12:41",{"id":131,"version":132,"summary_zh":78,"released_at":133},314540,"0.6.0","2025-11-12T15:12:43",{"id":135,"version":136,"summary_zh":137,"released_at":138},314541,"@mcp-pointer\u002Fserver@0.5.2","### 补丁变更\n\n-   6d99931：对齐版本以进行发布\n","2025-10-01T10:15:10",{"id":140,"version":141,"summary_zh":78,"released_at":142},314542,"0.5.2","2025-10-01T10:15:12",{"id":144,"version":145,"summary_zh":146,"released_at":147},314543,"@mcp-pointer\u002Fserver@0.5.0","### 小幅改动\n\n-   d91e764：重构 SharedStateService，支持双格式并添加全面测试\n\n    -   为旧版和新版原始 DOM 数据添加双格式支持\n    -   创建 ElementProcessor 服务，用于服务器端 DOM 处理\n    -   使用工厂模式添加了全面的测试套件\n    -   增加对 DOM_ELEMENT_POINTED 消息类型的支持\n    -   保持完全向后兼容\n\n    服务器已准备好迎接浏览器扩展更新。\n\n### 补丁改动\n\n-   1c9cef4：用 node-html-parser 替代 jsdom，以获得更好的打包效果\n\n    -   减小了打包体积\n    -   解决了 esbuild 的打包问题\n    -   HTML 解析速度更快\n","2025-09-30T16:04:03",{"id":149,"version":150,"summary_zh":78,"released_at":151},314544,"0.5.0","2025-09-30T16:04:05",{"id":153,"version":154,"summary_zh":155,"released_at":156},314545,"@mcp-pointer\u002Fserver@0.4.4","### 补丁变更\n\n-   b245b98：同步服务器版本与 Chrome 扩展版本，以保持版本一致。两个包现在已关联，并将一起进行版本管理。\n","2025-09-25T21:11:27",{"id":158,"version":159,"summary_zh":78,"released_at":160},314546,"0.4.4","2025-09-25T21:11:29",{"id":162,"version":163,"summary_zh":164,"released_at":165},314547,"@mcp-pointer\u002Fserver@0.4.3","### 补丁变更\n\n-   eb70122：修复自动更新配置，确保始终使用最新版本\n\n    由于 `npx` 缓存了初始版本，用户曾被卡在首次安装的版本上。现已将所有 MCP 服务器配置更新为使用 `@mcp-pointer\u002Fserver@latest`，以确保用户在 AI 工具启动服务器时始终获得最新版本。\n\n    -   更新了 Claude Code、Cursor 和 Windsurf 的配置\n    -   添加了针对现有用户的重新配置说明\n    -   更新了文档和故障排除部分\n","2025-09-23T11:00:44",{"id":167,"version":168,"summary_zh":78,"released_at":169},314548,"0.4.3","2025-09-23T11:00:47",{"id":171,"version":172,"summary_zh":173,"released_at":174},314549,"@mcp-pointer\u002Fserver@0.4.2","### 补丁变更\n\n-   fa28a6b：改进 README 说明文件中的徽章和发布工作流\n\n    -   在 README 中添加版本和许可证徽章\n    -   在整个文档中强调 Option+Click 的使用方法\n    -   修复发布工作流，以防止提交到 README\n    -   添加自动更新清单文件版本号的功能\n    -   移除扩展程序中冗余的配置检查逻辑\n","2025-09-12T16:59:15",{"id":176,"version":177,"summary_zh":78,"released_at":178},314550,"0.4.2","2025-09-12T16:59:16",{"id":180,"version":181,"summary_zh":182,"released_at":183},314551,"@mcp-pointer\u002Fserver@0.4.1","### 补丁变更\n\n-   e232269：修复配置覆盖并改进 UI\n\n    -   修复 MCP 服务器配置，通过先移除再添加的方式实现对现有配置的覆盖\n    -   为配置覆盖场景添加全面的测试用例\n    -   更新边框颜色，使用 CSS 自定义属性以更好地支持主题化\n    -   修复 README 中 GitHub Actions 徽章的 URL\n    -   在发布工作流中添加将 README 复制到 npm 包的步骤","2025-09-12T13:44:42",{"id":185,"version":186,"summary_zh":78,"released_at":187},314552,"0.4.1","2025-09-12T13:44:43",{"id":189,"version":190,"summary_zh":191,"released_at":192},314553,"@mcp-pointer\u002Fserver@0.4.0","### 小幅改动\n\n-   ffcbf38：重大重构及配置优化\n\n    -   **README 重构**：全新改写，结构更清晰（示例部分、快速入门、工作原理等）\n    -   **新增自动配置命令**：用统一的 `config` 命令替代原有的 `configure` 和 `show-config`，可自动配置 AI 工具\n    -   **将“other”重命名为“manual”**：更清晰地命名适用于其他兼容 MCP 的工具的手动配置选项\n    -   **SupportedTool 枚举**：将工具名称转换为枚举类型，以提高类型安全性\n    -   **Jest 配置**：自动检测 `tsconfig`，无需手动配置 TypeScript 设置\n    -   **测试改进**：针对使用枚举的配置命令实现全面测试覆盖\n    -   **Chrome 扩展**：添加图标，并优化资源构建流程","2025-09-11T21:52:13",{"id":194,"version":195,"summary_zh":196,"released_at":197},314554,"@mcp-pointer\u002Fserver@0.3.3","### 补丁变更\n\n-   cbc8cb2：通过将共享包移至 `devDependencies` 修复 npm 发布问题\n\n    -   将 `@mcp-pointer\u002Fshared` 从 `dependencies` 移至 `devDependencies`\n    -   解决了在发布到 npm 时出现的 `workspace:\\*` 协议问题\n    -   共享代码由 esbuild 打包，因此运行时无需该依赖\n","2025-09-07T19:53:51"]