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
Check if MCP server already configured
claude mcp list to check if agentation MCP server is already registeredConfigure Claude Code MCP server
claude mcp add agentation -- npx agentation-mcp serverConfirm full setup
<Agentation />)NODE_ENV check ensures Agentation only loads in developmentnpx agentation-mcp doctor to verify setup