mcpField
A
agentation

agentation

github.com/petekpDesign & UI4846 installsUpdated 2d ago
Repository

About agentation

agentation is a project skill for setting up the Agentation annotation toolbar in a React project. It guides installation and development-only configuration, then explains optional MCP setup for syncing annotations with coding agents.

Key features

  1. 01Checks package installation and project configuration
  2. 02Adds the toolbar for development use
  3. 03Documents MCP setup and verification

Use cases

  1. 01Configure Agentation in a React project
  2. 02Enable annotation syncing with a coding agent

MCP support

The skill describes setting up the agentation-mcp server so annotations sync with coding agents. It lists tools for retrieving pending annotations, resolving them, and watching annotation updates.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/petekp/claude-code-setup --skill agentation

After installing, type/agentationin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported