A
agentation
by @benjitaylorv
4.5(230)
在Next.js项目中设置Agentation注释工具栏,提供可视化反馈功能,增强开发体验。
安装方式
npx skills add benjitaylor/agentation --skill agentationcompare_arrows
Before / After 效果对比
1 组使用前
在 Next.js 项目中手动集成 Agentation 可视化反馈工具栏,需要检查依赖、安装包并配置,过程繁琐且容易出错。
使用后
此技能能够自动检查并安装 Agentation 依赖,并指导用户在 Next.js 项目中设置 Agentation 注释工具栏,简化了可视化反馈工具的集成过程。
SKILL.md
Agentation Setup
Set up the Agentation annotation toolbar in this project.
Steps
-
Check if already installed
- Look for
agentationin package.json dependencies - If not found, run
npm install agentation(or pnpm/yarn based on lockfile)
- Look for
-
Check if already configured
- Search for
<Agentationorimport { Agentation }in src/ or app/ - If found, report that Agentation is already set up and exit
- Search for
-
Detect framework
- Next.js App Router: has
app/layout.tsxorapp/layout.js - Next.js Pages Router: has
pages/_app.tsxorpages/_app.js
- Next.js App Router: has
-
Add the component
For Next.js App Router, add to the root layout:
import { Agentation } from "agentation"; // Add inside the body, after children: {process.env.NODE_ENV === "development" && <Agentation />}For Next.js Pages Router, add to _app:
import { Agentation } from "agentation"; // Add after Component: {process.env.NODE_ENV === "development" && <Agentation />} -
Confirm component setup
- Tell the user the Agentation toolbar component is configured
-
Recommend MCP server setup
- Explain that for real-time annotation syncing with AI agents, they should also set up the MCP server
- Recommend one of the following approaches:
- Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.):
See add-mcp — run
npx add-mcpand follow the prompts to addagentation-mcpas an MCP server - Claude Code only (interactive wizard):
Run
agentation-mcp initafter installing the package
- Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.):
See add-mcp — run
- Tell user to restart their coding agent after MCP setup to load the server
- Explain that once configured, annotations will sync to the agent automatically
Notes
- The
NODE_ENVcheck ensures Agentation only loads in development - Agentation requires React 18
- The MCP server runs on port 4747 by default for the HTTP server
- MCP server exposes tools like
agentation_get_all_pending,agentation_resolve, andagentation_watch_annotations - Run
agentation-mcp doctorto verify setup after installing
用户评价 (0)
发表评价
效果
易用性
文档
兼容性
暂无评价
统计数据
安装量9.4K
评分4.5 / 5.0
版本
更新日期2026年5月23日
对比案例1 组
用户评分
4.5(230)
5
23%
4
51%
3
23%
2
2%
1
0%
为此 Skill 评分
0.0
兼容平台
🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI
时间线
创建2026年3月16日
最后更新2026年5月23日