Agentation Setup

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_pending and agentation_resolve

- MCP server runs on port 4747 by default; use agentation-mcp doctor to verify configuration after setup

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Steps

-

Check if already installed

- Look for agentation in package.json dependencies

- If not found, run npm install agentation (or pnpm/yarn based on lockfile)

-

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

-

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

-

Add the component