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:

tsx

import { Agentation } from "agentation";

// Add inside the body, after children:
{process.env.NODE_ENV === "development" && <Agentation />}

For Next.js Pages Router, add to _app:

tsx

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

MCP server exposes tools like

agentation_get_all_pending

agentation_resolve

, and

agentation_watch_annotations