agentation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Set up the Agentation annotation toolbar in this project.

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

Check if already installed
- Look for
```
agentation
```
  in package.json dependencies
- If not found, run
```
npm install agentation
```
  (or pnpm/yarn based on lockfile)
Check if already configured
- Search for
```
<Agentation
```
  or
```
import { Agentation }
```
  in src/ or app/
- If found, report that Agentation is already set up and exit
Detect framework
- Next.js App Router: has
```
app/layout.tsx
```
  or
```
app/layout.js
```
- Next.js Pages Router: has
```
pages/_app.tsx
```
  or
```
pages/_app.js
```

Add the component

For Next.js App Router, add to the root layout:

tsx

import { Agentation } from "agentation";

// Add inside the body, after children:
{process.env.NODE_ENV === "development" && <Agentation />}

For Next.js Pages Router, add to _app:

tsx

import { Agentation } from "agentation";

// Add after Component:
{process.env.NODE_ENV === "development" && <Agentation />}

Confirm setup
- Tell the user to run their dev server and look for the Agentation toolbar (floating button in bottom-right corner)

检查是否已安装
- 在package.json的依赖项中查找
```
agentation
```
- 如果未找到，运行
```
npm install agentation
```
  （或根据锁定文件使用pnpm/yarn）
检查是否已配置
- 在src/或app/目录中搜索
```
<Agentation
```
  或
```
import { Agentation }
```
- 如果找到，说明Agentation已完成设置，操作结束
检测框架路由类型
- Next.js App Router：存在
```
app/layout.tsx
```
  或
```
app/layout.js
```
  文件
- Next.js Pages Router：存在
```
pages/_app.tsx
```
  或
```
pages/_app.js
```
  文件

添加组件

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

tsx

import { Agentation } from "agentation";

// 添加到body内部，children之后：
{process.env.NODE_ENV === "development" && <Agentation />}

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

tsx

import { Agentation } from "agentation";

// 添加到Component之后：
{process.env.NODE_ENV === "development" && <Agentation />}