Agentation 是一款与代理无关的可视化反馈工具。您只需点击页面上的元素、添加备注，并复制结构化的输出内容，即可帮助 AI 编码代理准确找到您所指的代码。

安装

npm install agentation -D

使用

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      <Agentation />
    </>
  );
}

工具栏会出现在页面右下角。点击以激活，然后单击任意元素即可进行标注。

功能

• 点击标注 – 点击任意元素，自动识别选择器
• 文本选择 – 选择文本以标注特定内容
• 多选 – 拖动以一次选择多个元素
• 区域选择 – 拖动以标注任何区域，即使是空白区域
• 动画暂停 – 冻结所有动画（CSS、JS、视频），以便捕捉特定状态
• 结构化输出 – 复制包含选择器、位置和上下文的 Markdown 格式内容
• 深色/浅色模式 – 自动匹配您的偏好或手动设置
• 零依赖 – 纯 CSS 动画，无需运行时库

工作原理

Agentation 会捕获类名、选择器和元素位置信息，以便 AI 代理能够通过 grep 查找您所指的精确代码。与其描述“侧边栏中的蓝色按钮”，不如直接提供 .sidebar > button.primary 以及您的反馈内容。

系统要求

• React 18 及以上版本
• 桌面浏览器（不支持移动端）

文档

完整文档请访问 agentation.com

许可证

© 2026 Benji Taylor

采用 PolyForm Shield 1.0.0 许可证

Agentation 快速上手指南

Agentation 是一款与 AI 代理无关的可视化反馈工具。它允许你在页面上点击元素、添加备注，并复制结构化的输出内容，帮助 AI 编程助手精准定位你所指的代码位置。

环境准备

在开始使用前，请确保你的开发环境满足以下要求：

• 框架版本：React 18 或更高版本
• 运行环境：桌面端浏览器（暂不支持移动端）
• 依赖项：无额外运行时依赖（纯 CSS 动画实现）

安装步骤

使用 npm 将 Agentation 作为开发依赖安装到你的项目中：

npm install agentation -D

💡 国内加速建议：如果遇到下载缓慢问题，推荐使用淘宝镜像源安装：

npm install agentation -D --registry=https://registry.npmmirror.com

基本使用

1. 引入组件：在你的应用根组件或主布局文件中导入 Agentation。
2. 渲染组件：将其放置在 <YourApp /> 之后即可激活工具栏。

示例代码如下：

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      <Agentation />
    </>
  );
}

3. 开始使用：
   • 刷新页面后，工具栏将出现在右下角。
   • 点击工具栏激活，随后点击页面上任意元素进行标注。
   • 支持文本选择、多选框选、区域框选及暂停动画等功能。
   • 复制生成的结构化 Markdown 内容（包含选择器、位置和上下文），直接发送给 AI 助手即可精准定位代码。