SuperAPI AI 工具集

agentation

智能体与模型

查看项目

更新于 10-15 19:54

技能介绍

用途:agentation 是连接人类视觉反馈与 AI 编码智能体的桥梁。用户无需用文字描述“侧边栏里的蓝色按钮”,只需在页面上点击元素,工具就会输出 .sidebar > button.primary 这类可直接被智能体检索的选择器。

主要能力:提供 React 工具栏组件(npm 包 agentation)与 MCP 服务器/CLI(npm 包 agentation-mcp)。可捕获 CSS 选择器、元素路径、边界框、附近文本、计算样式、无障碍信息及 React 组件树。支持两种模式:复制粘贴模式(标注后复制 Markdown 粘贴到智能体对话)和 Agent Sync 模式(通过 endpoint 连接 MCP 服务器,智能体用 agentation_watch_annotations 循环监听)。标注生命周期为 pending → acknowledged → resolved,或 dismissed(需理由)。

使用方式:安装工具栏 npm install agentation -D,在 React 18+ 项目中引入 <Agentation />,建议用 NODE_ENV === 'development' 限制为开发环境。MCP 服务器可用 npx add-mcp "npx -y agentation-mcp server" 自动配置,或 npx agentation-mcp server 启动(HTTP 端口 4747 + MCP stdio),npx agentation-mcp doctor 验证。Claude Code 用户可执行 npx skills add benjitaylor/agentation 后使用 /agentation。支持 Claude Code、Codex CLI、Gemini CLI、OpenCode、Cursor、Windsurf 等平台配置。

适用场景:人机迭代式 UI/UX 评审、智能体自动修复标注的监听循环、自主设计评审、将视觉反馈注入智能体钩子。

限制:仅支持桌面浏览器,不支持移动端;需要 React 18+;标注默认本地存储,连接 MCP 服务器后自动同步;生产环境不应发布该组件。具体收费与价格信息暂未提供。