# Agentation > Add Agentation visual feedback toolbar to any React project - Skill: `bamzc/agentation` (Agent Skill) - Install (CLI): `npx skillmds@latest add bamzc/agentation` - Raw SKILL.md: https://api.skillmd.com/api/skills/bamzc/agentation/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: bamzc (https://skillmd.com/u/bamzc) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/bamzc/agentation --- # Agentation Setup Set up the Agentation annotation toolbar in this project. ## Requirements - React 18+ - Zero dependencies beyond React ## Steps 1. **Check if already installed** - Look for `agentation` in package.json dependencies - If not found, run `npm install agentation` (or pnpm/yarn based on lockfile) 2. **Check if already configured** - Search for ` {children} {process.env.NODE_ENV === "development" && } ); } ``` **For Next.js Pages Router**, add to `pages/_app.tsx`: ```tsx import { Agentation } from "agentation"; export default function App({ Component, pageProps }) { return ( <> {process.env.NODE_ENV === "development" && } ); } ``` **For Vite + React**, add to `src/main.tsx`: ```tsx import { Agentation } from "agentation"; ReactDOM.createRoot(document.getElementById('root')!).render( {import.meta.env.DEV && } ); ``` **For Create React App**, add to `src/index.tsx`: ```tsx import { Agentation } from "agentation"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( {process.env.NODE_ENV === "development" && } ); ``` **For other React projects**, add to the root component or main entry file: ```tsx import { Agentation } from "agentation"; // Add at the end of your root component {process.env.NODE_ENV === "development" && } ``` 5. **Confirm setup** - Tell the user to run their dev server and look for the Agentation toolbar (floating button in bottom-right corner) - The toolbar should appear in the bottom-right corner of the page ## Notes - The environment check ensures Agentation only loads in development - For Vite projects, use `import.meta.env.DEV` instead of `process.env.NODE_ENV` - For Next.js, use `process.env.NODE_ENV === "development"` - No additional configuration needed — it works out of the box - Compatible with any React 18+ project