Loerei

So, instead of "Translate What You See To What Your Agent Needs," it should be something more straightforward like "Stop digging through code. Hover over any UI element to instantly copy its exact code context for your AI"?

Yeah, that's a lot clearer to understand what the tool does.

Thank y'all for your advice. I tried subreddits once a while ago, but I got beaten by karma and rules. I'm not very cultured, lol. I guess I really need to learn to fit in first.

Got a lot from y'all. I'm still all ears if there is more!

Yes, thank you for the advice.

I'm against the idea of those tools, too, especially the spamming ones. They can make your potential users feel annoyed.

Thanks for sharing your experience.

And yes, here is my GitHub if you want to see: https://github.com/loerei

I didn't want to post it when I made this post because I genuinely wanted to ask for advice. I wouldn't have this many comments if I were trying to advertise myself in an Ask HN, lol. Anyways, I'm glad you are interested.

I do some projects resolving my own pain, let me see..

I made a file-editing MCP and integrated linting, so my agent gets feedback after it makes any patches. It also resolves line drift or many other errors my agent usually makes with default tools: https://github.com/loerei/patchitRIGHT

I wanted to boost my UI tasks. Simply put, I don't want to remember the file name, open it, and tell the agent which line to read anymore. So I made a tool so I can just hover over any UI element, and it lets me copy the information I was tired of finding manually or remembering: https://github.com/loerei/HoverSource

I also made quite a landing page for it as I tried to gain users: https://loerei.github.io/HoverSource/

There is also an MCP to make benchmarks and help my agent read other sessions more effectively: https://github.com/loerei/chronicle-mcp

I found that describing where a broken UI is and taking screenshots for AI agents really sucks. I’m too lazy to explain an indescribable visual bug or capture a millisecond-long flash. I also don’t want to remember which file defines an element, whether it's right in the .tsx or a problem with the Parent Styles in .css. And even if you can point out the exact file, your agent still has to dig through thousands of lines of code to know what on earth you're yapping about.

In a 7700-file monorepo like Cal.com, simply giving the right file in the prompt for your agent saves about 68.9% of execution time and 94.2% of the tokens your agent needs to digest. HoverSource gives all the needed information and further pushes it to -88.5% time and -94.5% tokens, basically skipping the entire digging session and jumping straight to reasoning and executing. The save is linear to how big your codebase is.

I want to save tokens, but don’t want to spend my time and energy digging manually, and a junior dev tossed into a monorepo definitely doesn't either. So?

I built HoverSource: a zero-invasive UI-to-Code inspector. In plain English, it translates what you see into what the AI needs, just by hovering your mouse. Under the hood, it extracts the precise DOM context and exact line-and-column source locations straight to your clipboard.

There is also Design Mode, which generates a design layout specification block. It directs the AI on how to position a new element relative to existing ones, basically saving you from ambiguous "put it in the top-right corner under the header" prompts.

I support a wide range of frameworks, including React, Vue, Svelte, Angular, SolidJS, Preact, Astro, and Vanilla JS/TS. Most work perfectly fine out of the box by hooking into the internal data structures—like Virtual DOM instances or React Fiber nodes. Most modern frameworks naturally attach internal metadata to DOM elements during development; you just need to install HoverSource with npm and run it in your project with hs start or hs dev. Vue, Angular, and Vanilla are a little more stubborn, so I built invasive mode for them, either during compile-time or runtime.

For Vue: You just need a quick compile-time setup (`hs install --vue`). This hooks into the compiler to inject source metadata directly into the DOM dataset, making sure the overlay can catch exactly where your components live.

For Angular: Similar story. You run `hs install --angular` to set up compile-time tagging. It uses custom transformers to explicitly map template elements to their source files and lines via attributes like ngSourceFile, since Angular doesn't hand those out for free in dev mode.

For Vanilla: It goes the runtime monkey-patching route. The overlay intercepts core browser APIs like document.createElement and the innerHTML setter. Whenever an element is instantiated, it captures the V8 stack trace in the background, extracts the exact file and line, and sticks it into a data-hs-source attribute on the fly.

Either way, you need at most 3 steps to make it work. Or you can also try it live with zero config at https://loerei.github.io/HoverSource/.

Great seeing you guys seeking talents for the children, thank you.