What Kind of Tool Is Umtri?
Vibe coding is convenient, but it can leave you struggling to understand what you built yourself. Umtri gives you a way to visualize your project with your AI agent, so you can understand it at a glance.
If you build apps by vibe coding, sooner or later you’ll hit moments like these.
“Does our app even have this information? Where is it shown?” “I want to tweak the checkout flow a little — how far does that reach?” “When was this added? It got in without me noticing.”
Compared with the days when you wrote the code yourself, these problems are simply easier to run into. And the bigger the project gets, the more this not-knowing piles up. When a user asks you a question, you can’t answer until your AI agent tells you. A change you thought was simple turns out to have a much wider blast radius than expected, and the service goes down for a long time. Sometimes information you didn’t even know about turns out to be exposed, and you end up in a tough spot.
I felt this problem keenly while writing the Vibe Coding for Everyone series and working through countless projects. Umtri.io is the service built to solve it.
Drawing your project as a tree
Umtri draws your project in the shape of a tree. The core divisions of your project form the trunks (Trunk), and the flows branching from them grow from thick limbs (Limb) into thin twigs (Twig), then into leaves (Leaf) and leaf veins (Vein).
| Part of the tree | Name | What it holds |
|---|---|---|
| Thick trunk | Trunk | Service components (app, server, database, etc.) |
| Big branch | Limb | Major areas of activity (user menu, cart & checkout, order history, etc.) |
| Small branch | Twig | Modules and groups of related information (the checkout process) |
| Leaf | Leaf | Objects (a checkout screen component, etc.) |
| Leaf vein | Vein | Functions and methods (actions inside a screen, like “Place order” or “Apply coupon”) |
These divisions aren’t absolute, because no two projects or components are alike. The only rule that always holds is that you go from big to small. You don’t need to know the details. Ask the AI agent connected to Umtri to draw your project as a tree, and it draws the tree following those rules. All you do is judge whether the drawing is easy to understand, and ask it to redraw if it isn’t.
What does a tree give you?
You see it all at once. Without opening files one by one, you can see how your app is growing and which branch handles which information.
You can replay how it grew. Drag the time slider at the bottom back and you’ll see the tiny first tree, then branches sprouting one by one. You can follow the order in which your information structure was created and how it grew.
You see how far a problem reaches. As the tree is drawn, the connections and dependencies between its nodes are analyzed and recorded too. So when something breaks, the places you need to check alongside it and the scope of the impact are shown and recorded. You can check how a bug in that area — and its fix — affects other parts, and what to verify after the change.
Your team and your AI agent see it too. The tree is something your teammates and your AI agent can look at together, which makes communication clearer. It’s easy to share where things stand, and even an agent starting a fresh session can check the project’s map and find a safe path.
Take a look first
You can try it right away without signing up. Check out the demo.
On the demo page, you can:
- Click branches and leaves — each node tells you what it is.
- Drag the time slider at the bottom all the way left, then slowly to the right. — branches sprout in the order the app grew.
- Click a red dot (a bug) — you’ll see where a bug like “the coupon is applied twice when payment is retried” is attached.
It’s not enough to really experience Umtri, but it shows you roughly how it works. Remember, though: the real value shows up once you connect it over MCP and manage your own project with it.
When should you start?
Starting from scratch is best. Create a project ground (Ground), then create your first season (Season). The season can be called PoC, or 0.0.1 — whatever you like. Add the very first thing you’re going to build as a trunk, and ask your agent to draw the plan you have in mind. Part 4 covers plan nodes in detail.
It’s fine if you already have a project, too. Turn the time that has passed into seasons and ask your AI, season by season, to “look at the code and move it into a tree.” You can split by the commits in git, or by when files were created. A newly created ground starts in the transplanting state, where you can edit without leaving a record. That lets you move an existing project over cleanly. Part 3 covers this as well.
In the next part, we’ll connect Umtri to the AI you use (Claude Code and others). Umtri really shines when you tend the tree together with your agent over MCP. Try growth tracking, bug tracking, spec management with the wiki, and everything else project management needs — together with your agent.