Adds the Agentation visual feedback toolbar to a Next.js project, enabling annotation syncing with AI agents via MCP server setup.
How this skill is triggered — by the user, by Claude, or both
Slash command
/benjitaylor-agentation-1:agentationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Set up the Agentation annotation toolbar in this 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 installingnpx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin benjitaylor-agentation-1Coordinates a team of AI agents (Architecture, Implementation, etc.) to plan, build, test, and ship production-ready Next.js applications end-to-end.
Makes web apps agent-ready by exposing UI as WebMCP tool manifests for AI agents, with phased inventory, integration, verification, and healing.
Deploys websites, apps, AI agents to Agentuity production. Creates new projects, migrates Express/Next.js/Vite apps, restructures code, and manages full deploy workflows.