Agentation — скилл

---
name: agentation
description: Add Agentation visual feedback toolbar to a Next.js project
---

# Agentation Setup

Set up the toolbar and, when requested, connect it to the user's coding agent.
A visible toolbar and a healthy MCP server do not prove that browser feedback
reaches the agent. Verify that final step before calling setup complete.

## Steps

1. **Inspect the project**
   - Read the project's instructions and detect its package manager.
   - Look for `agentation` and an existing `<Agentation>` mount before installing.
   - If already mounted, inspect its `endpoint` and current MCP setup. Do not
     exit just because the component exists, and do not add a duplicate mount.
   - Install `agentation` if missing, using the existing lockfile's package manager.

2. **Choose the connection mode from the request**
   - For MCP or live agent feedback, use the same HTTP server URL as the agent.
     The default local server is `http://localhost:4747`; preserve an existing
     custom port or proxy URL. Never assume the browser and agent use the same
     machine when the project is remote.
   - For manual copy/paste only, omit `endpoint` and explain that feedback remains
     in this browser. Do not silently enable a server connection.
   - If the intended mode is unclear, ask one brief question while inspecting
     the existing project. Keep working on independent setup checks.

3. **Add or update the component**

   For a Next.js App Router project, render in the root layout's body after
   children. For Pages Router, render after `Component` in `pages/_app`.
   Preserve any existing callbacks and options.

   ```tsx
   import { Agentation } from "agentation";

   // Use the actual server URL selected above for MCP sync:
   {process.env.NODE_ENV === "development" && (
     <Agentation endpoint="http://localhost:4747" />
   )}
   ```

   The package provides its own client boundary. Keep the application's root
   layout server-rendered unless the project has another reason to change it.

4. **Configure the agent when MCP was requested**
   - Use the project's existing MCP client and configuration conventions.
   - The launch command must include the `server` subcommand:
     `npx -y agentation-mcp server`.
   - For supported agents, `npx add-mcp "npx -y agentation-mcp server"` is one
     setup option. For Claude Code, use
     `claude mcp add agentation -- npx -y agentation-mcp server` or the init wizard.