Agentation

Agentation

Set up the Agentation annotation toolbar in development only.

Before editing, read the shared dev-overlay rules in ../dev-overlays.md.

Steps

1. Check package.json for agentation.

2. Search src/, app/, and pages/ for existing Agentation imports or <Agentation usage. If already configured, report that and stop.

3. Install as a dev dependency using the repo's package manager:

   bun add -d agentation
   

4. Create or update src/components/DevTools.tsx with a client-only dynamic import:

   "use client";
   
   import dynamic from "next/dynamic";
   
   const Agentation = dynamic(
     () => import("agentation").then((mod) => ({ default: mod.Agentation })),
     { ssr: false },
   );
   
   export function DevTools() {
     if (process.env.NODE_ENV !== "development") return null;
     return <Agentation />;
   }
   

5. Mount <DevTools /> as a sibling of {children} in the app shell.

6. Run the app in development and confirm the toolbar appears.

7. Run the production build and confirm Agentation does not ship.

MCP Setup

For real-time annotation syncing with agents, recommend one setup path:

• Universal setup: run npx add-mcp and choose agentation-mcp.
• Package wizard, when available: run agentation-mcp init.

After MCP setup, restart the coding agent and run the package's doctor command if available.

Notes

• Works alongside Interface Kit and DialKit in the same DevTools.tsx.
• Agentation's MCP server exposes tools such as agentation_get_all_pending, agentation_resolve, and agentation_watch_annotations.
• For autonomous browser annotation, use agentation-self-driving after the toolbar is installed.