Impact
Know what a change will affect, not only what it looks like.
Abbox maps your code onto your UI. Connect the tools you already use and each element carries what they know about it: who clicks it, how the page scores, how fast its request answers. Your agent sees the full picture of a change, and so do you.
“This change breaks a sign-up funnel.”
Abbox knows which button sends which analytics event. When a change touches that button, it can say how many people use it and which funnel counts on it.
- Visited /pricing5,180
- Clicked Start free trial1,364
- Finished sign-up902
- It removes the trial_started event from this button.
- That event is step 2 of your sign-up funnel: 1,364 uses in the last 30 days.
- After this merge the funnel would read zero from here on.
“This heading lowers the page’s search score.”
A stray h3 or an over-long description is invisible in a diff and obvious on the page. Abbox marks it on the element, with the line to change.
- An h3 now comes before any h2, so the heading order is broken.
- The new description is 240 characters. Search results show about 160.
“Search got 10 seconds slower after this pull request.”
A backend change shows up where people feel it. Abbox knows which route the search box calls, so a slower route can be shown on the search box, with the pull request that changed it.
- Average wait went from 1.2 s to 11.2 s.
- This box calls GET /people/search, which that pull request changed.
- Open the search box in this state, or ask for a fix.
Why a map of code to UI makes this possible
Every tool names a problem in its own terms. Abbox already holds the links between them.
| Tool | Names a problem by | Abbox joins it to |
|---|---|---|
| Analytics (PostHog) | an event name, a page address | the button or form that sends the event |
| Search (PageSpeed, heading and metadata checks) | a page address, a DOM node | the element and the line that renders it |
| Tracing and errors (planned) | a backend route, a stack frame | the element whose request reaches that route |
- 1
Detect
A dashboard says a number moved: sign-ups fell, a page got slower, a score dropped.
- 2
Locate
Abbox turns that into an element, a file and a line, and the change that touched it.
- 3
Fix
You or your agent change the code, knowing what depends on it.
- 4
Verify
Abbox walks the app to the element and reports that it renders, in any state.
- 5
Confirm
After it ships, the same number is read again for exactly that element.
What works today, and what is planned
The pictures above are examples. This is the honest list.
| What you get | Status | From |
|---|---|---|
| Usage on the element: counts, trend, what worked and what failed | Today | PostHog |
| An agent sees a page's usage and analytics events before changing it | Today | MCP: get_page_context |
| A fix that would drop or rename an analytics event is refused | Today | Abbox fixes |
| Speed, accessibility and search results tied to source lines | Today | Google PageSpeed |
| Heading order, titles, descriptions and vague links, marked on the element | Today | Abbox checks |
| A warning on a change before it merges, naming the funnel or score it affects | Planned | |
| Search queries and rankings per page | Planned | Search Console, Semrush |
| Latency and errors on the element whose request got slower | Planned | OpenTelemetry tools such as Dash0, error tools |
Working today: your analytics on the page
Connect PostHog and every tracked button shows its count, its trend and what failed, in the viewer and to your agent.
- /signup42%
- /docs21%
- Left the site37%
- Desktop 64%
- Mobile 31%
- Tablet 5%
For agents, coding or not
- A coding agent, before a change
- Call
get_page_context(project, path)on Abbox’s MCP server. It returns the page’s buttons and forms with files and lines, the analytics events they send and how often, the backend calls and their answers, and speed and search problems tied to lines. Works today. - A coding agent, after a change
- Run
npx @abbox/cli@latest verifyto see that it renders, thenwhat_changed(project)after it ships to see how views of those pages moved. Works today. - An SEO, growth or support agent
find_pages(project, problem)lists pages with search issues, untracked buttons, errors, no traffic or slow loads. Each finding names the element and line, so the agent can ask for the exact change as a pull request. Works today for the sources above.
The reference is in the agent docs and llms.txt.
Start with what changed. Add the rest when you need it.
Three commands set Abbox up on your machine. Connecting PostHog takes a sign-in.