---

name: agentation description: 为Next.js项目添加Agentation视觉反馈工具栏

Agentation 设置

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

步骤

1. 检查是否已安装

   • 在package.json依赖项中查找agentation
   • 如果未找到，运行npm install agentation（或根据lockfile使用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工具栏（右下角的浮动按钮）

注意事项

• NODE_ENV检查确保Agentation仅在开发环境中加载
• Agentation需要React 18
• 无需额外配置 — 开箱即用