agentation
Installation
Summary
Agentation visual feedback toolbar for Next.js development with AI agent annotation syncing.
- Installs a development-only React component that displays in your Next.js app (App Router or Pages Router) when
NODE_ENVis development - Requires React 18 and integrates via a single component import in your root layout or _app file
- Optional MCP server setup enables real-time annotation syncing with 9+ AI agents including Claude Code, Cursor, and Windsurf through tools like
agentation_get_all_pendingandagentation_resolve - MCP server runs on port 4747 by default; use
agentation-mcp doctorto verify configuration after setup
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