Productivity

agentation

benjitaylor/agentation · updated Apr 8, 2026

$npx skills add https://github.com/benjitaylor/agentation --skill agentation
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_
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

    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 />}
    
  5. Confirm component setup

    • Tell the user the Agentation toolbar component is configured
  6. Recommend MCP server setup

    • Explain that for real-time annotation syncing with AI agents, they should also set up the MCP server
    • Recommend one of the following approaches:
      • Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.): See add-mcp — run npx add-mcp and follow the prompts to add agentation-mcp as an MCP server
      • Claude Code only (interactive wizard): Run agentation-mcp init after installing the package
    • Tell user to restart their coding agent after MCP setup to load the server
    • Explain that once configured, annotations will sync to the agent automatically

Notes

  • The NODE_ENV check ensures Agentation only loads in development
  • Agentation requires React 18
  • The MCP server runs on port 4747 by default for the HTTP server
  • MCP server exposes tools like agentation_get_all_pending, agentation_resolve, and agentation_watch_annotations
  • Run agentation-mcp doctor to verify setup after installing
general reviews

Ratings

4.675 reviews
  • Charlotte Nasser· Dec 28, 2024

    agentation reduced setup friction for our internal harness; good balance of opinion and flexibility.

  • Noah Jain· Dec 20, 2024

    agentation reduced setup friction for our internal harness; good balance of opinion and flexibility.

  • Harper Iyer· Dec 16, 2024

    I recommend agentation for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.

  • Layla Dixit· Dec 16, 2024

    Keeps context tight: agentation is the kind of skill you can hand to a new teammate without a long onboarding doc.

  • Kwame Gupta· Dec 4, 2024

    Keeps context tight: agentation is the kind of skill you can hand to a new teammate without a long onboarding doc.

  • Michael Khanna· Dec 4, 2024

    agentation is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

  • Chen Shah· Dec 4, 2024

    We added agentation from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.

  • Charlotte Thompson· Nov 23, 2024

    Registry listing for agentation matched our evaluation — installs cleanly and behaves as described in the markdown.

  • Layla Smith· Nov 23, 2024

    agentation fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.

  • Layla Khan· Nov 11, 2024

    We added agentation from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.

showing 1-10 of 75

1 / 8