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: