A

agentation

by @benjitaylorv
4.5(230)

在Next.js项目中设置Agentation注释工具栏,提供可视化反馈功能,增强开发体验。

ai-agentsagent-orchestrationmulti-agent-systemsai-workflowGitHub
安装方式
npx skills add benjitaylor/agentation --skill agentation
compare_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

  1. Check if already installed

    • Look for agentation in package.json dependencies
    • If not found, run npm install agentation (or pnpm/yarn based on lockfile)
  2. 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
  3. 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
  4. 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 />}
    
  5. Confirm component setup

    • Tell the user the Agentation toolbar component is configured
  6. 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-mcp and follow the prompts to add agentation-mcp as an MCP server
      • Claude Code only (interactive wizard): Run agentation-mcp init after installing the package
    • 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_ENV check 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, and agentation_watch_annotations
  • Run agentation-mcp doctor to 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日