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 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-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_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