agentation
Original:🇺🇸 English
Not Translated
Add Agentation visual feedback toolbar to a Next.js project
1installs
Added on
NPX Install
npx skill4agent add fernando-augustop/claude-skills agentationSKILL.md Content
Agentation Setup
Set up the Agentation annotation toolbar in this project.
Steps
-
Check if already installed
- Look for in package.json dependencies
agentation - If not found, run (or pnpm/yarn based on lockfile)
npm install agentation
- Look for
-
Check if already configured
- Search for or
<Agentationin src/ or app/import { Agentation } - If found, report that Agentation is already set up and exit
- Search for
-
Detect framework
- Next.js App Router: has or
app/layout.tsxapp/layout.js - Next.js Pages Router: has or
pages/_app.tsxpages/_app.js
- Next.js App Router: has
-
Add the componentFor 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:tsximport { 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 and follow the prompts to add
npx add-mcpas an MCP serveragentation-mcp - Claude Code only (interactive wizard):
Run after installing the package
agentation-mcp init
- 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 check ensures Agentation only loads in development
NODE_ENV - 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, andagentation_resolveagentation_watch_annotations - Run to verify setup after installing
agentation-mcp doctor