Add Agentation to React and Vite apps, wire the local MCP sync server, and verify that browser annotations reach the agent. Use when setting up Agentation, repairing a broken Agentation setup, or capturing the repeatable Agentation workflow in a repo.
Use this skill when a repo needs Agentation added or repaired.
Keep the setup small and repeatable. Do not scatter one-off notes across the repo.
Default to this shape unless the repo clearly needs something else:
agentation mounted only in developmentagentation-mcp available as a local commandhttp://127.0.0.1:4747agentationagentation-mcpUse a tiny wrapper component and lazy-load it only in development.
Preferred shape:
AgentationToolbar componentimport.meta.env.VITE_AGENTATION_ENDPOINThttp://127.0.0.1:4747Add these scripts when the app uses npm-compatible package scripts:
{
"agentation:init": "agentation-mcp init",
"agentation:server": "agentation-mcp server",
"agentation:doctor": "agentation-mcp doctor"
}
Official local server command:
agentation-mcp server
Official health check:
agentation-mcp doctor
For tools that need explicit MCP registration, register the same server command they can launch locally.
Claude Code example from the official package:
claude mcp add agentation -- npx agentation-mcp server
Do not stop after editing files.
Always verify all of this:
http://127.0.0.1:4747/health returns healthy