agentation

Agentation 是一款与代理无关的视觉反馈工具，旨在弥补视觉用户界面开发与 AI 辅助编程之间的鸿沟。它使开发人员能够通过在浏览器中直接点击元素、拖拽选择区域或高亮文本来执行页面标注。通过捕捉精确的 CSS 选择器、类名和元素位置，Agentation 让 Claude Code、Cursor 或 Windsurf 等 AI 助手能准确理解开发人员所指的 DOM 部分，将模糊的自然语言描述转化为机器可读的上下文。

• 视觉标注：点击即可标注功能，并自动识别 CSS 选择器和元素层级。

• 多模式选择：支持文本选取、多元素选取和基于区域的标注，包含暂停动画以捕捉特定状态 UI 的功能。

• 实时同步：通过 MCP (Model Context Protocol) 服务器集成，允许将标注从浏览器实时传输至 AI 编程助手。

• 通用代理支持：通过 add-mcp 工具，兼容包括 Claude Code、Cursor、Codex 等广泛的 AI 助手。

• 结构化数据输出：生成基于 Markdown 的上下文，包含选择器、坐标和注释，确保 AI 助手能够 grep 或定位与 UI 反馈相关的特定代码块。

• 开发者导向：针对 React 18+ 和 Next.js 优化，内置 NODE_ENV 检查确保工具栏仅在本地开发阶段启用。

• 安装方式：使用 npm install agentation -D，并在开发环境保护下将 <Agentation /> 组件注入您的 Next.js 根布局或 _app 文件中。

• 若要获得完整功能，应使用 npx add-mcp 初始化 Agentation MCP 服务器，这会配置 HTTP 服务器（默认端口 4747）来转发标注。

• 该工具公开了一套强大的 MCP 工具集，包含 agentation_get_all_pending、agentation_resolve 和 agentation_watch_annotations，适用于复杂网页项目的自动化状态管理。

• 需使用桌面浏览器环境，不支持移动设备上的标注工具栏。

• 该系统提供高保真的反馈循环，能有效地将视觉 UI 错误和改进需求转化为 AI 编程助手可操作的代码级任务。