agentation

Original🇺🇸 English
Not Translated

Add Agentation visual feedback toolbar to a Next.js project

1installs
Added on

NPX Install

npx skill4agent add fernando-augustop/claude-skills agentation

SKILL.md Content

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:
    tsx
    import { Agentation } from "agentation";
    
    // Add inside the body, after children:
    {process.env.NODE_ENV === "development" && <Agentation />}
    For Next.js Pages Router, add to _app:
    tsx
    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