agentation

Add Agentation visual feedback toolbar to a Next.js project

1. Sprawdź, czy Agentation jest już zainstalowany — otwórz package.json i poszukaj wpisu agentation w sekcji dependencies. Jeśli go nie ma, uruchom npm install agentation (lub pnpm install / yarn add w zależności od używanego menadżera pakietów).

2. Sprawdź, czy komponent jest już skonfigurowany — przeszukaj katalogi src/ lub app/ w poszukiwaniu import { Agentation } lub u003cAgentation. Jeśli znajdziesz, Agentation jest już gotowy do użytku.

3. Określ typ routera Next.js — sprawdź, czy projekt używa App Router (istnieje app/layout.tsx lub app/layout.js) czy Pages Router (istnieje pages/_app.tsx lub pages/_app.js).

4. Dodaj komponent do głównego pliku layoutu — dla App Router wstaw do root layout, dla Pages Router do _app. W obu przypadkach dodaj: import { Agentation } from "agentation"; na górze pliku, a następnie umieść {process.env.NODE_ENV === "development" && u003cAgentation /u003e} w body (App Router) lub po Component (Pages Router).

5. Skonfiguruj serwer MCP dla synchronizacji z agentami AI — uruchom npx add-mcp i postępuj zgodnie z instrukcjami, aby dodać agentation-mcp jako serwer MCP. Alternatywnie, jeśli używasz tylko Claude Code, zainstaluj pakiet i uruchom agentation-mcp init. Po konfiguracji zrestartuj agenta kodowania, aby załadował serwer.

6. Zweryfikuj działanie — belka narzędziowa powinna być widoczna w aplikacji w trybie development. Adnotacje będą teraz automatycznie synchronizowane z agentem AI.