Open source · Point your coding agent at anything in your app

Ahem. That button’s wrong.

Point at anything in your app and your coding agent gets the exact file and line behind it. Fixes land quicker and first time, with less explaining and fewer tokens, now or as a batch.

Install the plugin View on GitHub
> /plugin marketplace add ahemui/ahemui

01Why

Stop explaining where things are.

A screenshot shows your agent what's wrong, not where it lives in your code. So you describe it, it searches and guesses, and you go round again. AhemUI hands over the exact file and line with the picture.

Quicker

One sentence, and your agent starts in the right file.

More precise

The exact file, line and component. No guessing which button.

More efficient

Flag a dozen things, then let your agent work the batch.

Fewer tokens

No searching the codebase, no retries after wrong guesses.

The same fix, both ways

Screenshot and explain5 steps · every time

"See screenshot. On the checkout page, in the order summary on the right, the total at the bottom, not the subtotal above it, should include tax. I think it's worked out in OrderSummary or maybe useCart?"

  • Claude guesses which total
  • Back and forth to correct it
  • Gone once the chat scrolls on
  1. Take a screenshot, crop it, paste it into Claude.
  2. Describe where it is, in words.
  3. Claude searches for "total", finds a dozen matches and picks one.
  4. Reload, check, explain again when it's the wrong one.
  5. Next tweak: start over. Nothing is tracked.
Point at it2 steps

"Total should include tax."

Claude also gets
OrderSummary.vue:42:7/checkout › Order summarycart state
  • Right file, first time
  • Nothing to explain again
  • Tracked until you approve it
  1. Circle the total and say what's wrong.
  2. Claude opens OrderSummary.vue:42 and fixes it. Check it on the page if you like.

Not just UI. Point at a wrong total, a failing step or a confusing error, and your agent gets the props, state and failed requests behind it.

  • Wrong numbers
  • Broken flows
  • Error messages
  • Failing requests
  • Copy
  • Layout & styles

02The tally

Every nitpick counted.
Fixed now, or all at once.

AhemUI keeps a running tally of everything anyone flags, right on the page and in your repo. Send one to your agent this second, or pile them up and let it work the whole list.

Nothing gets lost

Every note stays pinned to the element it's about, with its status, until someone approves the fix. No more feedback buried in chat scroll.

Now, or as a batch

Hand one to your agent straight away, or park it in the backlog and clear the lot with one command later.

Shared by the whole team

The queue is plain files in .ahemui/, committed with your code. Designers and PMs flag, anyone's agent picks it up, and git keeps the history.

03What your agent gets

Feedback with receipts.

A screenshot tells your agent what you saw. AhemUI also tells it where it lives. Every capture lands in your repo as a plain Markdown file with everything needed to find and fix it.

  • Exact source: the file, line and component chain (Vue out of the box; React ≤18 and Svelte in dev builds)
  • Page context: the route, page component, section heading and environment
  • Evidence: console errors, failed requests, component props and state, and the clicks that led there
  • Design tokens: the CSS variables and classes behind the element, so fixes stay on-system
  • Private by default: passwords and anything marked private are blacked out before anything leaves the page
.ahemui/items/01J9Z…/item.md
status: open
start: now
type: layout
route: /projects
page:
  routeName: projects
  pageComponent: ProjectsPage
  section: Mobile app
anchor:
  source: src/components/ProjectCard.vue:14:5
  components: [App, ProjectsPage, ProjectCard]
  text: Deploy
styles:
  tokens:
    background-color: var(--brand-600)
    padding: 9px var(--space-4)
evidence:
  network: [GET /api/deployments → 500]
shot: shot.webp
---
full width, call it "Deploy to production"

04How it works

Point. Say. Ship. Approve.

  1. 1

    Point at it

    Press Alt+Shift+S. Drag a box, click an element, or Shift-drag to lasso anything. Add more areas, or a "make it like this" example.

  2. 2

    Say what's off

    Type or dictate. Enter starts it now; Ctrl+Enter saves it to the backlog for later.

  3. 3

    Your agent ships it

    /ahemui:watch picks up the request right away, edits the code and commits it, while you keep working. The marker turns blue while it works.

  4. 4

    You approve

    See the before and after right on the page. Looks good ✓ closes it; Not quite… sends it back with your note.

05Features

Not another annotator.

Clicking an element to produce a prompt is table stakes. AhemUI is the loop around it: a queue, a reviewer and a paper trail.

Queue & backlog

Start-now items go straight to a watching agent session; backlog items wait for /ahemui:work. Work items page by page, or by area, type or label.

Review loop

Automatic after-shots, a before/after on the marker, one-click approve or send back. Your agent can ask you questions, and you answer on the page.

Lives in your repo

Items are Markdown in .ahemui/, committed with the fix. Hand a backlog to a teammate on a branch; the history stays in git.

Live board

Queue, backlog, in progress, in review, done. Search, filters, screenshots and actions, plus a snapshot backlog.html you can open from disk.

Staging & prod too

The browser extension works on deployed sites. Form fields, emails and long numbers are masked before capture.

Your tracker, if you want

Mirror items to Linear, Jira, Notion or GitHub Issues through the MCP servers you already use. The repo stays the source of truth.

Triage

/ahemui:triage classifies by type, area and priority from the captured page context, and flags duplicates.

Accessibility checks

Pick a11y and the highlighted element is checked with axe-core; the violations travel with the request.

06Plugins

Plugs into your agent.

The overlay, the queue and the board are the same everywhere. A small plugin connects them to the coding agent you already work in.

Available

Claude Code

Twelve /ahemui:* commands and the MCP tools behind them: watch for Start now, work the backlog, review pages, sync your tracker.

> /plugin marketplace add ahemui/ahemui
Coming soon

Codex

The same queue and overlay, worked from Codex. Point at something in the browser and Codex picks it up.

Tell us

Your agent?

The queue is plain files in your repo plus an MCP server, so other agents can follow. Ask for yours.

07Trackers

Already have a backlog? Keep it.

AhemUI doesn't replace your tracker. It's the inbox that fills it: every capture becomes a proper ticket through the MCP server your agent already uses. There's no AhemUI integration to install and no API keys to hand over.

BrowserCircle & say itoverlay or extension
Repo.ahemui/anchors, screenshots, context
Your agent/ahemui:syncthrough your MCP server
Your trackerLinear · Jira · Notion · GitHub Issuesor anything with an MCP server
  • Tickets that stand on their own: page, section, element, source file, environment, errors and steps, plus the screenshot where your tracker's MCP can attach files
  • Linked both ways: the item remembers its ticket key and the marker links to it; the ticket carries an AhemUI-Item back-reference
  • Status stays in sync: closed in the tracker resolves the item; approved on the page moves the ticket to done or in review
  • Your team's conventions: issue types, labels, target project and workflow states live in .ahemui/config.json, committed for everyone
  • Manual or automatic: run /ahemui:sync when you like, or set auto and triage, work and watch keep tickets current as they go
ENG-142In review

Make the deploy button full width

ahemuilayoutProjects › Mobile app

full width, call it "Deploy to production"

Page
Projects /projects › Mobile app
Element
src/components/ProjectCard.vue:14:5
Seen in
Chrome, 1440×900, dark mode
Screenshot
attached

AhemUI-Item: 01J9Z…

// .ahemui/config.json
"tracker": {
  "kind": "linear",
  "target": "Team ENG, project Web app",
  "sync": "auto",
  "labels": ["ahemui"],
  "instructions": "Bug for bugs, Task otherwise; move to In Review when done"
}

Twelve commands. You'll use two.

claude · /ahemui:

/ahemui:watchwork Start-now items as they arrive

/ahemui:workwork through the backlog

/ahemui:setup /ahemui:review /ahemui:triage /ahemui:board /ahemui:status /ahemui:sync /ahemui:handoff /ahemui:archive /ahemui:update /ahemui:remove

08Install

Running within minutes.

  1. Add the plugin to Claude Code

    > /plugin marketplace add ahemui/ahemui
    > /plugin install ahemui@ahemui

  2. Set up your project

    In a new Claude Code session at your repo root:

    > /ahemui:setup

    It creates .ahemui/, installs the package and adds one line to your Vite config:

    import ahemui from "ahemui"
export default { plugins: [vue(), ahemui()] }

  3. Restart your dev server and press Alt+Shift+S

    Then run /ahemui:watch and press Enter on your first request.

Want to capture on staging or prod? Download ahemui-extension-v0.4.0.zip from the GitHub release, unzip it and load it unpacked at chrome://extensions (Developer mode on; works in Chrome, Edge, Brave and Vivaldi). A store listing is coming. Then turn on "Enable AhemUI on <site>" in its popup.

Questions, answered.

Does my code or data go anywhere?

AhemUI itself sends nothing anywhere, and there's no AhemUI cloud. The server runs on 127.0.0.1 inside your dev server, and captures stay on your machine and in your repo. Your coding agent reads them like the rest of your code, so they're handled under its provider's terms (Anthropic's, for Claude Code), the same as anything else you show it.

Is it only for visual tweaks?

No. Point at anything on the page: a wrong calculation, a flow that breaks, an error message, a request that fails. Each capture carries the component's props and state, failed network requests, console errors and the clicks that led there, so your agent can fix behaviour and data as well as layout.

Which frameworks does it support?

Any framework: screenshots, selectors, page context, errors and styles work everywhere. On top of that, some frameworks give your agent the exact source location: Vue + Vite gives the template file and line, React ≤18 and Svelte give file and line from their dev builds, and React 19 gives component names.

Not using Vite?

Run npx ahemui serve in your repo and use the browser extension. Screenshots, selectors, page context, errors and styles all work on any stack (webpack, Next.js, Rails, a deployed site); your agent finds the code from those instead of an exact file and line.

Which browsers?

The overlay injected by the Vite plugin works in any modern browser, including Claude's built-in one. The extension targets Chromium browsers.

Is it free?

Yes. The plugin, overlay, extension and CLI are open source under MIT. A hosted version for teams may come later; the open-source tools stay free.

What if I already track work in Linear or Jira?

Keep it. /ahemui:sync mirrors items to your tracker through the MCP server you already have connected, and keeps status in sync both ways.

Get started with AhemUI

Install the plugin and start sending feedback to your agent.

InstallGitHub

Ahem. Your move.

Point at what's wrong. Your agent takes it from there.

Install AhemUI Star on GitHub
> /plugin marketplace add ahemui/ahemui