Add Agentation visual feedback toolbar to a Next.js project
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i benjitaylor/agentation/skills/agentationMethod 2 - openskills (supports sync & update)
npx openskills install benjitaylor/agentationAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Best for coding tasks
No setup required
Set up the Agentation annotation toolbar in this project.
Check if already installed
agentation in package.json dependenciesnpm install agentation (or pnpm/yarn based on lockfile)Check if already configured
<Agentation or import { Agentation } in src/ or app/Detect framework
app/layout.tsx or app/layout.jspages/_app.tsx or pages/_app.jsAdd 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
Recommend MCP server setup
npx add-mcp and follow the prompts to add agentation-mcp as an MCP serveragentation-mcp init after installing the packageNODE_ENV check ensures Agentation only loads in developmentagentation_get_all_pending, agentation_resolve, and agentation_watch_annotationsagentation-mcp doctor to verify setup after installing