agentation

What problem does it solve?

Agentation accelerates UI debugging by providing a visual feedback toolbar in Next.js apps during development, simplifying component inspection and interaction analysis.

Core Features & Use Cases

• Quick integration of the Agentation toolbar in Next.js App Router or Pages Router projects.
• Development-time UI debugging with an overlay toolbar to inspect components and interactions.
• Lightweight setup with minimal configuration and automatic activation in development mode.

Quick Start

Install the Agentation package if it's not already in your project. Then add the Agentation component to the application root:

• For App Router: add the toolbar inside app/layout.tsx, e.g. import { Agentation } from "agentation"; {process.env.NODE_ENV === "development" && <Agentation />}
• For Pages Router: add the toolbar in pages/_app.js or _app.tsx, e.g. import { Agentation } from "agentation"; {process.env.NODE_ENV === "development" && <Agentation />} Start the dev server and verify the toolbar appears in the bottom-right corner in development mode.