agentation

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)

1. 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

1. 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

1. 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 />}

1. Confirm component setup

• Tell the user the Agentation toolbar component is configured

1. 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