andrielfn
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:
Where Next?
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
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Bringing learning, work and compliance together since 1987.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
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.