Annotai - turn UI annotations into structured context that AI agents can act on

News Announcing
, , , ,
1

Annotai is a dev-only annotation widget for Phoenix apps. You click an element on the running page, leave a note, and it goes straight to your AI agent with everything it needs to act on it: the CSS selector, the phx-* attributes, and the HEEx file:line that rendered the element.

I created it mostly because of the pain I felt when trying to translate UI/UX changes from what I was seeing in the browser to the agents. At the same time I was seeing other frameworks/IDEs/etc with similar solutions, all trying to close this gap between UI and the agents, so I decided to create something specifically for Phoenix/LViveView. I’ve been using it for quite a while now on a few projects and it’s been a huge time saver.

Features

  • Element annotations. Click any element on the page and leave a note. Annotai figures out where it lives in your code.
  • Text annotations. Select a span of text and annotate it.
  • Image attachments. Paste or drop a screenshot onto a note.
  • Source location. Every note comes with the HEEx file:line that rendered the element, so the agent opens the right file straight away.
  • In-process MCP server. The agent talks to Annotai over MCP. Nothing extra to run. It lives inside the Phoenix app you already have running.
  • Light and dark modes. The widget follows your system theme.
  • Phoenix-aware. It reads phx-* attributes and LiveView’s HEEx annotations directly.
  • Dev-only. It mounts as a single plug under :dev and stays out of production.

Hex: annotai | Hex
GitHub:

9 Likes