agentation

Agentation 设置

在此项目中设置 Agentation 注释工具栏。

步骤

1. 检查是否已安装

   • 在 package.json 的依赖中查找 agentation
   • 如果未找到，运行 npm install agentation（或根据锁文件使用 pnpm/yarn）

2. 检查是否已配置

   • 在 src/ 或 app/ 中搜索 <Agentation 或 import { Agentation }
   • 如果找到，报告 Agentation 已设置并退出

3. 检测框架

   • Next.js App Router：存在 app/layout.tsx 或 app/layout.js
   • Next.js Pages Router：存在 pages/_app.tsx 或 pages/_app.js

4. 添加组件

   对于 Next.js App Router，添加到根布局：

   import { Agentation } from "agentation";
   
   // 在 body 内，children 之后添加：
   {process.env.NODE_ENV === "development" && <Agentation />}
   

   对于 Next.js Pages Router，添加到 _app：

   import { Agentation } from "agentation";
   
   // 在 Component 之后添加：
   {process.env.NODE_ENV === "development" && <Agentation />}
   

5. 确认组件设置

   • 告知用户 Agentation 工具栏组件已配置

6. 推荐 MCP 服务器设置

   • 解释为了实现与 AI 代理的实时注释同步，还应设置 MCP 服务器
   • 推荐以下方法之一：
     • 通用（支持 9 种以上代理，包括 Claude Code、Cursor、Codex、Windsurf 等）：
       参见 add-mcp — 运行 npx add-mcp 并按提示添加 agentation-mcp 作为 MCP 服务器
     • 仅 Claude Code（交互式向导）：
       安装包后运行 agentation-mcp init
   • 告知用户在 MCP 设置后重启编码代理以加载服务器
   • 解释配置完成后，注释将自动同步到代理

备注

• NODE_ENV 检查确保 Agentation 仅在开发环境中加载
• Agentation 需要 React 18
• MCP 服务器默认在端口 4747 上运行 HTTP 服务器
• MCP 服务器暴露的工具包括 agentation_get_all_pending、agentation_resolve 和 agentation_watch_annotations
• 安装后运行 agentation-mcp doctor 以验证设置