agentation▌
benjitaylor/agentation · updated Apr 8, 2026
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_ENV is 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_
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
Ratings
4.6★★★★★75 reviews- ★★★★★Charlotte Nasser· Dec 28, 2024
agentation reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Noah Jain· Dec 20, 2024
agentation reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Harper Iyer· Dec 16, 2024
I recommend agentation for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Layla Dixit· Dec 16, 2024
Keeps context tight: agentation is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Kwame Gupta· Dec 4, 2024
Keeps context tight: agentation is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Michael Khanna· Dec 4, 2024
agentation is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Chen Shah· Dec 4, 2024
We added agentation from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Charlotte Thompson· Nov 23, 2024
Registry listing for agentation matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Layla Smith· Nov 23, 2024
agentation fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Layla Khan· Nov 11, 2024
We added agentation from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
showing 1-10 of 75