HoverSource
GitHub
Translate What You See To What Your Agent Needs.
Hover on any UI element in your browser, Alt + C, Ctrl + V, and see your AI skip the digging session.
Try Live Sandbox
View on GitHub
npm install -g hoversource
Created by @loerei
VISUAL INSPECTOR
Interactive UI Sandbox
Ditch the manual search. See the internal file structure and component metadata of any UI element instantly. Your AI agent will thank you.
Hover, Copy, Done!
Inspector Mode is live. Just hover over any component in this mock feed, then hit C. You'll get a perfectly formatted, AI-ready metadata block in your clipboard—no manual file-hunting required.
IG
S3
S4
loerei
photographer
coder
Hover Here!
AGENT RUNTIME
Watch your agent stop wandering.
Stop letting your AI agent waste time grepping through thousands of files. HoverSource feeds the agent the exact file path and line number, so it can start coding immediately. Press 'Send' to see the difference.
HoverSource feeds your AI agent the exact file path and line number, bypassing the tedious 'grep-and-search' phase. It slashes agent steps by 73.9% and reduces token consumption by 94.5%, turning minutes of exploration into seconds of execution.
gemini-3.5-flash@hoversource-agent: ~
With HoverSource
File Path Only
No Context
Steps: 0
Tokens: 0
Time Elapsed: 0s
HoverSource CLI Agent v1.0.0
Agent ready to receive instructions.
HoverSource CLI Agent v1.0.0
Agent ready to receive instructions.
HoverSource CLI Agent v1.0.0
Agent ready to receive instructions.
Click Send to Agent to process the task.
Send to Agent
Engineered for AI Autonomy
HoverSource abstracts the visual layer, translating pixels directly into surgical file-line-column mappings.
INTEGRATION
Framework Support Matrix
Works out-of-the-box with Next.js, React, Vue, Svelte, Vite, and Webpack. Zero config required to inspect browser nodes.
React<br>Next.js<br>Vue<br>Svelte<br>Vite<br>Webpack
SHORTCUT
Copy Component Metadata
Instantly copy formatted JSX element source information to your system clipboard using a single key combination.
Alt
PIPELINE
Compiler-to-DOM Map
Bridges compiled browser code back to project source code. Mappings are precise to the file, line, and column.
DOM Node ➔ [KbarTrigger]
Parser ➔ apps/web/modules/shell/Kbar.tsx
AST Target ➔ Line: 371, Col: 7
Quick Start
Install HoverSource globally and start debugging your application in seconds. Zero complex onboarding or configuration required.
01 / INSTALL<br>Install CLI globally via npm
npm install -g hoversource
02 / RUN<br>Start HoverSource in project root
hs start
or<br>hs
PERFORMANCE
Benchmarks
Toggle the repository size and slide the controller to compare AI agent metrics across all 15 real-world benchmark sets.
Benchmarked using chronicle-mcp via js-tiktoken.
Cal.com<br>5,054 files • 489k LOC
YumeShelf<br>178 files • 22k LOC
Group A: No Context<br>Group B: File Only<br>Group C: HoverSource
Group C: HoverSource
STEPS
17.1
CUMULATIVE INPUT
35,733
PEAK CONTEXT
6,486
AVG TIME
16.4s
Token Consumption<br>5.4%
Peak Context<br>6,486
Execution Time<br>16.4s
Overview<br>UI Sandbox<br>CLI Agent<br>Features<br>Quick Start<br>Benchmarks
Component: -
Element: -
REACT
Alt+Shift+Scroll
File: -
Path: -
Size: -
Color: -
Background: -
Layout: -
Parent Styles:
Stack:
Press C to copy | Alt+Shift+C to copy all | Alt+P to Freeze | Alt+M for Minimal | Alt+S for Config | Alt+X to Switch Mode