Agentation 用于在 Next.js 项目中添加可视化反馈工具栏，并将标注内容与 Claude Code 打通。以下为资料中提供的设置流程与事实。
用途 Agentation 提供一套标注（annotation）工具栏，用于在开发过程中对页面进行可视化反馈，并通过 MCP 服务器把标注同步到 Claude。
主要能力
- 在 Next.js 项目中以 React 组件形式加载工具栏：<Agentation />。
- 通过 MCP 服务器（agentation-mcp）与 Claude Code 集成，使标注自动同步到 Claude。
- 组件仅在开发环境加载（通过 NODE_ENV === "development" 判断）。
使用方式
- 检查是否已安装：在 package.json 的 dependencies 中查找 agentation。若未找到，运行 npm install agentation（或根据锁文件使用 pnpm/yarn）。
- 检查是否已配置：在 src/ 或 app/ 中搜索 <Agentation 或 import { Agentation }。若已存在，则说明已设置完成。
- 检测框架：
- Next.js App Router：存在 app/layout.tsx 或 app/layout.js。
- Next.js Pages Router：存在 pages/_app.tsx 或 pages/_app.js。
- 添加组件：
- App Router：在根 layout 中引入 import { Agentation } from "agentation";，并在 body 内、children 之后添加： { process.env.NODE_ENV === "development" && <Agentation />; }
- Pages Router：在 _app 中引入 import { Agentation } from "agentation";，并在 Component 之后添加： { process.env.NODE_ENV === "development" && <Agentation />; }
- 确认组件设置完成。
- 检查 MCP 服务器是否已配置：读取 ~/.claude/claude_code_config.json（若存在），检查是否存在 mcpServers.agentation 条目；若存在则跳过配置。
- 配置 Claude Code MCP 服务器：
- 若 ~/.claude/ 目录不存在则创建。
- 读取现有 claude_code_config.json（保留其他 MCP 服务器）。
- 添加或合并 mcpServers.agentation 条目： { "mcpServers": { "agentation": { "command": "npx", "args": ["agentation-mcp", "server"] } } }
- 将更新后的配置写回文件。
- 确认完整设置：告知用户已配置工具栏 React 组件（<Agentation />）与随 Claude Code 自动启动的 MCP 服务器；提示重启 Claude Code 以加载 MCP 服务器；说明标注此后会自动同步到 Claude。
适用场景
- 使用 Next.js（App Router 或 Pages Router）的前端项目，在开发阶段收集可视化反馈。
- 使用 Claude Code 并希望通过 MCP 将页面标注同步给 Claude 的工作流。
限制与注意事项
- NODE_ENV 检查确保 Agentation 仅在开发环境加载。
- Agentation 需要 React 18。
- MCP 服务器在 Claude Code 启动时自动启动（使用 npx，无需全局安装）。
- HTTP 服务器默认使用 4747 端口。
- 可运行 npx agentation-mcp doctor 验证设置。
其他信息（如收费、价格、平台支持范围、具体效果）暂未提供。