agentation

Name: agentation
Author: benjitaylor

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

INSTALLATION

npx skills add https://github.com/benjitaylor/agentation --skill agentation

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Steps

Check if already installed

Look for agentation in package.json dependencies

If not found, run npm install agentation (or pnpm/yarn based on lockfile)

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

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

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" &#x26;&#x26; <Agentation />}

For Next.js Pages Router, add to _app:

import { Agentation } from "agentation";

// Add after Component:

{process.env.NODE_ENV === "development" &#x26;&#x26; <Agentation />}

Confirm component setup

Tell the user the Agentation toolbar component is configured

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

agentation

SKILL.md

Agentation Setup

Steps

Notes

Let your agent run on any real-world website

Related skills

Stop writing automation&scrapers