andrielfn
Annotai - turn UI annotations into structured context that AI agents can act on
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:linethat 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
:devand stays out of production.
Hex: annotai | Hex
GitHub:
Trending in Announcing
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #performance
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Most Liked
kjwvanijk
This is really convenient, I am currently workign on an interactive totorial. I can easily step through my tutorial and leave instructions on every element that need attention. I love this tool.