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.
Loerei•1h ago
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/.