Click to annotate.
For agents.

Smart clicks, better results. Clickly adds a floating toolbar to your React app — click any element, annotate it, and ship structured context straight to Claude Code, Cursor, or any AI agent. No screenshots. No “the blue button in the sidebar.”

localhost:3000
Clickly’s Dashboard
1
2
3
4
▾
Claude Code
█

How you use it

  1. Click the toolbar icon in the bottom-right to activate
  2. Hover over elements to see them highlighted with a cyan ring
  3. Click any element to open the annotation popup
  4. Write your feedback and click Add
  5. Click Copy to get formatted markdown
  6. Paste into Claude Code, Cursor, or any AI agent

Tip: With MCP integration, skip copy-paste entirely — your agent sees annotations in real time.

What agents get

  • CSS selector to grep your codebase precisely
  • Source file + line to jump directly to the right component
  • React component tree — App > Page > Button
  • Computed styles — current size, color, font
  • Your feedback with intent, priority, and context

Try it

The toolbar is active on this page. Annotate these demo elements:

Example Card

Click this card to annotate it. The output includes the element path, computed styles, and source file location.

Freeze animations

Click ❄ in the toolbar to pause this animation mid-frame, then annotate the exact state you want to capture:

Best practices

  • Be specific — “Button text unclear” beats “fix this”
  • One issue per annotation — easier for agents to address individually
  • Include context — what you expected vs. what you see
  • Select text — for typos, select the exact words before annotating
  • Pause animations — freeze to capture a specific frame

Installation guide →

All features →

Set up MCP integration →