Agentation 常见问题 FAQ：安装、版本兼容与移动端限制的 10 个高频问题清单

Agentation 常见问题 FAQ安装、版本兼容与移动端限制的 10 个高频问题清单【免费下载链接】agentationThe visual feedback tool for agents.项目地址: https://gitcode.com/gh_mirrors/ag/agentationAgentation 是一款专为 AI 编程代理设计的视觉反馈工具Visual Feedback Tool在浏览器中点击页面元素、添加批注即可一键复制结构化 Markdown 输出让 Claude、Cursor 等 AI 编码代理精准定位你正在描述的代码。本文整理了安装、版本兼容与移动端限制的 10 个高频问题帮你快速避坑上手。一、安装与配置Q1Agentation 如何快速安装只需两步通过 npm 安装为开发依赖npm install agentation -D在 React 应用中引入组件官方建议加NODE_ENV判断仅开发环境加载import { Agentation } from agentation; {process.env.NODE_ENV development Agentation /}页面右下角会出现工具栏点击激活后即可对任意元素进行批注。完整步骤可参考 install/page.tsx。Q2支持 yarn / pnpm / bun 吗支持。除了 npm也可以使用以下等价命令包管理器安装命令npmnpm install agentation -Dyarnyarn add agentation --devpnpmpnpm add agentation -Dbunbun add agentation -dQ3Claude Code 用户能一键自动配置吗可以。在终端运行npx skills add benjitaylor/agentation安装 Skill然后在 Claude Code 中输入/agentation它会自动检测你的框架、安装包、创建 Provider 组件并接入 layout省去手动配置。该 Skill 的完整流程定义在 skills/agentation/SKILL.md。二、版本兼容Q4对 React 版本有什么要求Agentation 要求React 18作为 peer dependencyreact-dom同样需要 18 及以上版本具体声明见 package/package.json。零运行时依赖除 React 外不引入任何第三方库性能开销极小。Q5Next.js、Remix、SSR/SSG 项目能用吗✅ 可以。Agentation 是一个客户端组件在页面加载后 hydrate与 Next.jsApp Router / Pages Router、Remix、Astro 等 SSR/SSG 框架兼容无冲突。典型写法是在根 layout 中条件渲染见上节代码生产构建中不会执行健康检查或任何多余请求。Q6当前最新版是什么升级要注意什么当前版本为3.0.22026 年 3 月发布。最近两个大版本的更新要点3.0.0新增Layout 布局模式按L键拖拽组件、重排页面区块、从零画线框图输出格式升级至 AFS 1.1批注携带kind字段区分反馈与布局调整指令。2.0.0从标注-复制-粘贴升级为标注-实时协作新增 MCP 服务器集成、Webhooks、React 组件层级检测等。完整的发布历史可查看 changelog/page.tsx。Q7输出格式有哪些如何选择提供 4 种详细程度在设置面板切换Compact精简— 上下文最少适合快速提问Standard标准— 平衡之选默认推荐Detailed详细— 附带元素包围盒等完整上下文Forensic取证级— 包含计算样式等最大量细节三、移动端限制Q8为什么手机 / 移动浏览器上看不到工具栏Agentation仅支持桌面浏览器Desktop only未针对移动端设备优化。原因很实际批注、多元素框选、区域拖选等操作依赖鼠标交互小屏体验不佳。官方 Requirements 明确标注 mobile not supported见 package/README.md。替代方案用手机验收页面时可在桌面浏览器中完成批注把复制出的 Markdown 输出粘贴给任意 AI 代理即可。Q9桌面端工具栏没出现怎么排查按顺序检查是否处于开发环境— 若按官方建议加了NODE_ENV development判断生产构建不会渲染工具栏React 版本— 确认react 18组件是否挂载—Agentation /需放在 React 组件树内推荐根级别CSS 遮挡— 可用classNameprop 调整定位或 z-index。四、进阶与协作Q10什么是 Agent SyncMCP 服务器如何接入Agent Sync 将浏览器工具栏与MCP 服务器默认端口 4747打通实现批注的实时同步与双向协作批注跨页面持久化、代理可直接读取/解决/驳回批注甚至支持多人共享同一会话。配置只需一条命令支持 9 种代理npx add-mcp npx -y agentation-mcp server⚠️ 小贴士MCP 服务器依赖better-sqlite3原生模块若因 Node.js 版本或平台导致构建/运行报错可将存储切换为内存模式AGENTATION_STOREmemory agentation-mcp server。更多参数说明见 mcp/README.md官方 FAQ 源文件在 faq/page.tsx。总结Agentation 安装极简一条 npm 命令 一个组件要求 React 18、仅支持桌面浏览器配合 MCP 服务器可从复制粘贴进化为与 AI 代理的实时协作闭环。【免费下载链接】agentationThe visual feedback tool for agents.项目地址: https://gitcode.com/gh_mirrors/ag/agentation创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考