hugo.felix

Posted on Apr 12

I Was Spending More Time Feeding AI Than Coding — So I Built This

Raise your hand if this sounds familiar:

You spot a weird UI bug in your browser
You open your editor and try to guess the component name — Navbar? Header? TopMenu?
You global search some text or CSS class
You finally find Button.tsx… but now you need Container.tsx for context
You copy everything, switch to your AI tool, and type: "Fix the padding issue here."

I realized recently that:

I spend more time finding and feeding context to AI than actually writing code.

The Real Bottleneck of AI Coding

Tools like Claude Code, Cursor and Copilot are insanely powerful.

But they all share one blind spot:

They live in your editor. Your bugs live in your browser.

That gap is where most of our time goes.

AI is smart — but it has zero awareness of your runtime UI.

So we end up acting like human middleware:

Inspecting elements
Guessing file names
Searching code
Copy-pasting context

It’s tedious. And honestly… kind of absurd in 2026.

What If the Browser Could Talk to Your AI?

The browser already knows:

which DOM node you're clicking
where it came from (thanks to frameworks like React / Vue)

So I started thinking:

Why can’t I just click a UI element… and send its source code directly to my AI?

The Idea

I hacked together a simple workflow:

Inject a lightweight inspector into the browser
Click any UI element
Resolve its source file + location
Grab relevant component context
Send it directly to your AI tool

No more guessing.
No more searching.
No more copy-pasting.

Introducing: Inspecto

I turned this into a tool called Inspecto:

👉 https://inspecto-dev.github.io/inspecto/

Inspect Mode

Annotate Mode

Annotate Quick Mode

Now my workflow looks like this:

Click → Context auto-collected → AI ready

It basically gives your AI eyes into your running app.

Where It Helps Most

So far, it's been especially useful for:

fixing visual/UI bugs quickly
navigating unfamiliar or legacy codebases
refactoring specific components with full context
avoiding "search fatigue" in large repos

Still Rough — Would Love Feedback

I originally built this just for myself, but I figured others might be hitting the same wall.

If this resonates with you, give it a try:

👉 https://inspecto-dev.github.io/inspecto/

I’m actively improving it, and I’d really value honest feedback:

Does this fit your workflow?
What context do you usually need when debugging UI with AI?
What’s missing?

Feel free to roast it — seriously 😄

DEV Community