Output
What Clickly exports — structured markdown your AI agent can act on directly.
Why structured output
The most common failure mode when giving UI feedback to an AI agent is ambiguity. “The button looks wrong” tells an agent almost nothing. Clickly captures the exact element, where it lives in the component tree, what file rendered it, and what it currently looks like — all in one copy-paste.
The output is plain markdown, so it works in any chat interface, inline in a file, or as a system prompt attachment.
Format levels
Choose the verbosity level that matches your workflow. More detail means longer context — use Compact for quick tweaks and Forensic for precise visual bugs.
Adds position, source file, text range, and one-line summaries of console errors, animations, and network requests.
## Annotation #1 **Element:** `button.cta.primary` **Path:** `body > main > button.cta` **Position:** 320px, 480px (160×44px) **Source:** `src/components/HeroSection.tsx:42` **Selected text:** "Get started" **Range:** chars 0-11 of `button` — "Get started" **Feedback:** Button text is too small and hard to read on mobile. **Console:** 1 error, 1 warning in last 30s **Animations:** 1 running **Network:** 2 requests · 1 failed in last 30s
Fields reference
| Field | Formats | Description |
|---|---|---|
| Element type | All | HTML tag name (Button, input, div, etc.) |
| CSS selector | All | Unique selector path to grep your codebase or query the DOM |
| Feedback | All | Your annotation text verbatim |
| Priority | Standard+ | Low / Medium / High |
| Type | Standard+ | Bug / Improvement / Question / Praise |
| Position | Standard+ | Bounding box coordinates and dimensions in pixels |
| Source | Standard+ | File path and line number from React fiber metadata |
| Component tree | Standard+ | React component ancestors from root to the clicked element |
| Selected text | Standard+ | Whatever the user highlighted before hitting Add (verbatim, truncated to 200 chars). |
| Range | Standard+ | Character offsets of the selection against the enclosing block. Detailed adds a [bracketed] context snippet; Forensic adds the host path. |
| Nearby text | Detailed+ | Text content of the element, its label, parent heading, and siblings. |
| Console | Standard+ | Count summary at Standard; per-message lines at Detailed; full stack trace CSS blocks at Forensic. Requires the Capture Console Errors setting. |
| Animations | Standard+ | Grouped playState counts at Standard; per-entry timing at Detailed; full keyframe dump at Forensic. On by default. |
| Network | Standard+ | Request counts at Standard; per-request method/URL/status at Detailed; response body previews at Forensic. Requires the Capture Network setting. Sensitive headers always stripped. |
| Computed styles | Forensic only | All non-default computed CSS properties at time of annotation. |
MCP mode
With the MCP server connected, your agent polls annotations in real time instead of reading pasted markdown. Same structured data, no clipboard step. Useful in long-running agent loops where you annotate while the agent is already running.