Add Agentation visual feedback toolbar to a Next.js project
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