About this Skill
Inspect an existing project, add or update the development-only toolbar, choose the feedback mode and verify it. The Skill distinguishes browser-local copy from server-backed agent feedback instead of treating a visible toolbar as a working connection.
Why we picked it
A reusable setup workflow that checks existing mounts, follows the project package manager and preserves the Next.js server layout. Live sync requires a separate MCP server and an actual test annotation.
What it helps with
- Add element-level UI feedback to an existing React project.
- Set up manual copy first, or connect a supported MCP client.
- Diagnose endpoint mismatches when annotations do not reach the agent.
Inspect and mount the toolbar
Check the current project
Read project instructions, detect its package manager and look for an existing Agentation dependency and component mount. Preserve current callbacks and options.
Add the development-only component
For Next.js App Router, mount after children in the root body. Keep the root layout server-rendered; Agentation supplies its own client boundary.
Choose manual copy or live sync
Without an endpoint, feedback remains in the browser and can be copied to your assistant. For MCP sync, use the same server URL on both sides and retain any existing custom port or proxy.
A running server or successful health check is only part of setup. Create a clearly identified test annotation and confirm the exact comment and page through the MCP annotation tools before declaring live sync ready.
| Command | What it helps with |
|---|---|
npx -y agentation-mcp server | Start the separate MCP and HTTP feedback service when live sync is requested. |
npx agentation-mcp doctor | Run service diagnostics, then verify a real annotation. |
Reviewed setup SkillOfficial installation and integration guide
Install the setup Skill
Use the existing project package manager to install the separate agentation dependency. Keep the toolbar behind a development guard.
| Command | What it helps with |
|---|---|
npx skills add benjitaylor/agentation --skill agentation | Select only the setup workflow from the repository. |
Before you use it
- React 18 or newer and a desktop browser; the upstream toolbar does not support mobile.
- Node.js and the project package manager. Installing this Skill does not install the toolbar package.
- Live sync additionally needs agentation-mcp, a compatible MCP client and the same reachable HTTP endpoint in the browser and agent. Manual copy does not need that server.
- The upstream code uses PolyForm Shield 1.0.0; review its license for your intended use.
Supported agents
Sources & references
Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.
