benjitaylor/agentation

解决的问题

Agentation 解决了向 AI 编码代理描述特定 UI 元素的困难。它不再使用如“侧边栏中的蓝色按钮”这类模糊的描述，而是允许用户在页面上可视化标注元素，并为代理提供精确的技术标识符（如 CSS 选择器），让代理能够找到负责该元素的准确代码。

运作方式

这是一个 React 组件，可为您的应用程序添加一个视觉反馈工具栏。当用户点击或选择页面区域时，该工具会捕获元素的类名、选择器和位置。这些数据随后会被转换为结构化的 markdown 输出，可复制并粘贴至 AI 工具，或通过 MCP (Model Context Protocol) 服务器直接同步至代理。

适用对象

使用 AI 编码代理（如 Claude Code、Codex、Gemini 或 Grok）并希望在开发过程中为 AI 助手提供精确视觉反馈与上下文的开发者。

特色亮点

• 精确选择：支持点击单个元素、选择文本、多重选择以及拖拽以定义特定区域。
• 代理集成：通过复制粘贴或直接经由 MCP 服务器进行实时同步，适用于任何 AI 工具。
• 状态捕获：可暂停 CSS 动画、Web Animations 和视频，以捕获特定的视觉状态。
• 深度访问：能够选择 shadow roots 和同源 iframes 内的元素。
• 轻量级：除了 React 18+ 之外，无任何运行时依赖。