agentation

Installation
Summary

Agentation visual feedback toolbar for Next.js development with AI agent annotation syncing.

  • Installs a development-only React component that displays in your Next.js app (App Router or Pages Router) when NODE_ENV is development
  • Requires React 18 and integrates via a single component import in your root layout or _app file
  • Optional MCP server setup enables real-time annotation syncing with 9+ AI agents including Claude Code, Cursor, and Windsurf through tools like agentation_get_all_pending and agentation_resolve
  • MCP server runs on port 4747 by default; use agentation-mcp doctor to verify configuration after setup
SKILL.md

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Steps

  1. Check if already installed

    • Look for agentation in package.json dependencies
    • If not found, run npm install agentation (or pnpm/yarn based on lockfile)
  2. Check if already configured

    • Search for <Agentation or import { Agentation } in src/ or app/
    • If found, report that Agentation is already set up and exit
  3. Detect framework

    • Next.js App Router: has app/layout.tsx or app/layout.js
    • Next.js Pages Router: has pages/_app.tsx or pages/_app.js
  4. Add the component

Installs
11.2K
GitHub Stars
4.2K
First Seen
Jan 22, 2026
agentation — benjitaylor/agentation