Ui Annotator Mcp

Name: Ui Annotator Mcp
Author: mcpware

本地服务

github.com/mcpware开发工具2131 周前更新

代码仓库

关于 Ui Annotator Mcp

UI Annotator MCP 是一个 MCP 服务，通过反向代理在任意网页上叠加悬停标签，供 AI 助手识别页面元素。无需浏览器扩展，适合需要与 AI 沟通界面修改的开发者、测试人员和设计人员。

主要功能

01悬停显示元素名称、选择器和尺寸
02反向代理注入，无需浏览器扩展
03检查模式下点击元素可复制名称
04DOM 变化后自动重新扫描
05提供 5 个 MCP 工具

适用场景

01用组件名称向 AI 描述需要修改的界面元素
02在任意浏览器中审阅页面并确认元素位置

MCP 相关

该项目是一个 MCP 服务，向 MCP 客户端提供 annotate、get_elements、highlight_element、rescan_elements 和 inspect_mode 五个工具。

#mcp #ui-annotation #developer-tools #reverse-proxy #browser #design-feedback #dom-inspector #claude

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "ui-annotator": {
      "command": "npx",
      "args": [
        "-y",
        "@mcpware/ui-annotator"
      ]
    }
  }
}

启动命令npx -y @mcpware/ui-annotator

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@mcpware/ui-annotator0.1.1stdio

工具

收录的工具列表 · 更新于 3 周前

参数	类型	必填	说明
url	string	是	要添加注释的目标 URL，例如 "http://localhost:3847" 或 "localhost:3847"

详细介绍

UI Annotator MCP

English | 廣東話

弥合所见与 AI 可引用内容之间的差距——适用于任何浏览器，无需扩展程序。

这是唯一一款能为每个网页元素显示可见标签的工具。将鼠标悬停在任意元素上，即可查看其名称。告诉 AI 助手“加宽 sidebar”，它就能准确知道你指的是哪个元素。无需截图、CSS 选择器，也不会产生沟通误解。

Demo

重要意义

大幅提升 AI 驱动的 UI 设计与迭代效率。痛点在于：告诉 AI“把那个按钮移到搜索栏旁边”总是行不通，因为 AI 看不到你的页面。UI Annotator 解决了这个问题——将鼠标悬停在任意元素上，其组件名称就会作为标签显示出来。现在你可以说“把 SearchButton 移到 NavBar 下方”，Claude 就会立即编辑正确的组件。无需浏览器扩展程序，适用于任何框架。工作流变为：打开页面 → 悬停以识别元素 → 使用实际组件名称描述更改 → Claude 编辑 → 刷新并重复。将令人沮丧的来回沟通变成流畅的设计循环。

问题

使用 AI 编码助手检查网页 UI 时，最难的不是修改代码，而是描述你想更改哪个元素。

“左边那个东西……第二行……不，是带图标的那个……”

你不知道它叫什么。AI 也不知道你指的是哪个元素。你把时间浪费在沟通误解上，而不是交付产品。

解决方案

通过标注代理打开页面。将鼠标悬停在任意元素上，即可立即查看其名称、CSS 选择器和尺寸。现在你们使用相同的语言交流。

# Start the MCP server
npx @mcpware/ui-annotator

# Open in ANY browser
http://localhost:7077/localhost:3847

就是这么简单。 无需浏览器扩展程序。无需更改代码。无需设置。适用于 Chrome、Firefox、Safari、Edge 等任何浏览器。

工作原理

Your app (localhost:3847)
        │
        ▼
┌─────────────────────┐
│  UI Annotator Proxy  │ ← Reverse proxy on port 7077
│  (MCP Server)        │
└─────────────────────┘
        │
        ▼
Proxied page with hover annotations injected
        │
        ├──► User sees: hover overlay + tooltip with element names
        └──► AI sees: structured element data via MCP tools

代理会获取你的页面，注入轻量级标注脚本，然后将页面提供给你。该脚本扫描 DOM，识别带名称的元素，并将其报告给 MCP 服务。你的 AI 助手会查询该服务，以了解页面上的内容。

功能

悬停标注

将鼠标悬停在任意元素上，即可查看：

元素名称（粉色）——便于人类阅读的标识符
CSS 选择器（等宽字体）——技术引用
内容预览——元素包含的文本
尺寸——宽度 × 高度，单位为像素

检查模式

点击工具栏中的 Inspect 按钮（或让 AI 为你切换）。在检查模式下：

点击任意元素 → 将其名称复制到剪贴板
暂停页面上的所有交互（点击不会触发按钮或链接）
再次点击 Inspect 即可返回普通模式

可折叠工具栏

工具栏位于页面顶部中央，显示：

检查模式切换按钮
元素数量
说明操作方法的副标题
折叠按钮（▲），可在不需要时将其最小化

面向 AI 的 MCP 工具

工具	功能
`annotate(url)`	返回代理 URL，供用户在任何浏览器中打开
`get_elements()`	返回所有检测到的 UI 元素及其名称、选择器和位置
`highlight_element(name)`	闪烁高亮指定元素，供用户确认
`rescan_elements()`	页面更改后强制重新扫描 DOM
`inspect_mode(enabled)`	远程切换检查模式

为什么不直接使用 DevTools？

	浏览器 DevTools	UI Annotator
目标用户	了解 DOM 的前端开发者	任何人——QA、PM、设计师、初级开发者
学习曲线	需要了解 DOM 树、CSS 选择器、盒模型	悬停并查看——零学习成本
沟通方式	“第二个子元素里的 `div.flex.gap-4`……”	“`sidebar`”
语言	CSS/HTML 技术术语	易于理解的名称
设置	教大家打开 DevTools 并浏览 DOM	打开一个 URL
AI 集成	无——AI 看不到你正在检查的内容	MCP——AI 能看到与你相同的元素名称

DevTools 用于调试。 UI Annotator 用于沟通——让人和 AI 对 UI 元素使用共同的词汇。

为什么不使用现有工具？

这些工具都无法做到 UI Annotator 的功能——通过反向代理为每个元素实时显示视觉标签：

工具	方式	我们的不同之处
browser-use（82K⭐）	AI 自动化框架	用于自动化浏览器，不会为人标注元素。使用场景截然不同。
Chrome DevTools MCP（31K⭐）	DOM 快照 + 元素 UID	AI 可以检查，但人看不到视觉标注。没有共同的词汇。
Playwright MCP（29K⭐）	无障碍树快照	返回结构化文本，没有视觉叠加层。会截断重要上下文。
OmniParser	截图 + CV 检测	基于截图，而非实时 DOM。在困难基准测试中的准确率约为 40%。
MCP Pointer（526 位用户）	Chrome 扩展 + MCP	需要 Chrome 扩展。由人点击选择——没有悬停叠加层。
Agentation	嵌入应用中的 npm 包	需要修改代码。依赖 React 18+。并非零配置。
Vibe Annotations	Chrome 扩展	基于扩展，仅面向开发者的标注工作流。

功能对比

功能	UI Annotator	MCP Pointer	Agentation	Cursor	Chrome DevTools MCP
悬停时进行视觉标注	是	否	部分支持	是（仅 IDE）	否
显示元素名称	是	是	是	否（仅高层级）	以编程方式获取
显示尺寸	是	是	是（详细）	是	以编程方式获取
MCP 服务	是	是	是	否	是
无需浏览器扩展	是	否	是	不适用	否
无需修改代码	是	是	否	不适用	是
支持任何浏览器	是	仅限 Chrome	仅限桌面端	仅限 Cursor	仅限 Chrome
零依赖	是	Chrome 扩展	React 18+	Cursor	Chrome
点击复制元素名称	是	否	否	否	否

架构

零外部依赖

反向代理：Node.js 内置的 http 模块
MCP 服务：@modelcontextprotocol/sdk（stdio 传输）
通信方式：HTTP POST（浏览器 → 服务）+ GET 轮询（服务 → 浏览器）
没有 WebSocket、没有 Express、没有浏览器扩展

代理的工作方式

用户请求 localhost:7077/localhost:3847
代理获取 http://localhost:3847
对于 HTML 响应：
- 注入 fetch() / XMLHttpRequest 拦截器（通过代理重写 API 路径）
- 重写 href="/..." 和 src="/..." 属性，使其通过代理路由
- 在 </body> 之前注入标注脚本
对于非 HTML 内容（CSS、JS、图片）：直接传递
移除 Content-Security-Policy 标头，以允许注入脚本

标注的工作方式

脚本扫描 DOM，查找带有 id、class、语义角色或交互角色的元素
悬停时：定位叠加边框（贴合 border-radius）+ 定位工具提示（始终保持在视口内）
通过 POST /__annotator/elements 向服务报告所有检测到的元素
每秒轮询一次 GET /__annotator/commands，获取服务指令（高亮、重新扫描、切换检查状态）
DOM 变化时，MutationObserver 自动重新扫描

快速开始

使用 Claude Code

# Add as MCP server
claude mcp add ui-annotator -- npx @mcpware/ui-annotator

# Then in conversation:
# "Annotate my app at localhost:3847"
# → AI returns proxy URL, you open it, hover elements, discuss changes by name

手动操作

npx @mcpware/ui-annotator
# Proxy starts on http://localhost:7077
# Open http://localhost:7077/localhost:YOUR_PORT

环境变量

变量	默认值	描述
`UI_ANNOTATOR_PORT`	`7077`	代理服务的端口

许可证

MIT

支持 Markdown

登录后评论

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

阅读入门指南

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。

项目	功能	安装
Instagram MCP	23 个 Instagram Graph API 工具——帖子、评论、私信、快拍、分析	`npx @mcpware/instagram-mcp`
Claude Code Organizer	用于管理 Claude Code 记忆、技能、MCP 服务、钩子的可视化仪表盘	`npx @mcpware/claude-code-organizer`
Pagecast	通过 MCP 将浏览器会话录制为 GIF 或视频	`npx @mcpware/pagecast`
LogoLoom	AI 标志设计 → SVG → 导出完整品牌套件	`npx @mcpware/logoloom`