Output

When you copy, you get structured markdown that agents can parse and act on. Four formats are available:

When to use each format

• Compact — Quick feedback with minimal context. Good for small fixes.
• Standard — Balanced detail for most use cases. Includes location and classes.
• Detailed — Full context with bounding boxes and nearby text. Good for complex issues.
• Forensic — Maximum detail including computed styles. For debugging layout/style issues.

React component detection

In React apps, the output includes the component tree for each annotated element (e.g., <App> <Dashboard> <SubmitButton>). The level of detail adapts to your output format: Compact omits React data, Standard shows filtered components, Detailed uses smart matching, and Forensic shows everything. Toggle React detection on/off in settings.

Source file detection

In development mode, Agentation automatically detects the source file and line number for annotated elements (e.g., src/components/Button.tsx:42). This works with Vite, Next.js, Webpack, and Turbopack. Agents can use the Source line to jump directly to the right file instead of searching.

Why structured output?

Selectors and class names let agents grep your codebase directly instead of guessing which element you mean. See how it works for more.

Customizing output

The copied output is plain markdown. Feel free to edit it before pasting into your agent:

• Add context — prepend with “I’m working on the dashboard page...”
• Prioritize — reorder annotations by importance
• Remove noise — delete annotations that aren’t relevant
• Add instructions — append “Fix these issues and run the tests”