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

hugo.felix — Sun, 12 Apr 2026 12:03:56 +0000

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 😄

Stop Copy-Pasting Context to AI — Click a Component, AI Knows Where to Fix It

hugo.felix — Thu, 09 Apr 2026 06:51:30 +0000

Why Inspecto

Since frontend development entered the AI-assisted era, tools like Claude Code, Cursor, and Copilot have dramatically accelerated how we write code. But the more you use them, the more you realize: the bottleneck isn't writing code anymore — it's finding it.

Picture this: your PM says "make that button rounded and fix the click handler." So you open DevTools, inspect the element, copy the class name, switch to your editor, search across dozens of files with similar names, finally locate the component, then copy-paste the path and context to your AI assistant…

That loop takes 2–3 minutes every time. In complex projects, even longer. 20 small changes a day = nearly an hour lost just finding code. You're constantly context-switching between browser, DevTools, editor, and AI — breaking your flow over and over.

To eliminate this loop entirely, we built Inspecto.

What Is Inspecto

Inspecto is a browser-first frontend development workflow tool. Its core idea in one sentence:

Start from the webpage, precisely locate the source code, and seamlessly hand off context to your AI assistant. No DevTools, no manual file searching, no copy-pasting context. You click it on the page, AI knows where to fix it.

Three Core Modes

1. Quick Jump — Source Code Navigation

The lightest capability — worth using even without AI. Hold Alt + Click on any element in the browser, and your editor instantly opens the exact source file and line. No searching, no guessing.

inspecto-dev.github.io

Use cases: Quick bug location, navigating legacy codebases, tracing component hierarchies.

2. Inspect Mode — Click a Component, Ask AI Directly

Click any component on the page, and Inspecto opens a menu with AI actions — including built-in and custom commands.

When you activate Inspect Mode and click a component, Inspecto automatically collects:

Source file location (path + line number)
Component tree path
Runtime errors on the page
CSS styles associated with the element

Then sends everything to your local AI assistant in one click. You can use built-in commands for common tasks, or define custom commands for your team's workflow.

inspecto-dev.github.io

Use cases: Single-point UI tweaks, localized logic fixes, high-frequency command execution.

3. Annotate Mode — Batch Annotations, Packaged for AI

Select multiple components across the page, add notes to each, and send them all to AI at once.

Sometimes you need to fix more than one thing. Your PM drops 5 UI adjustments at once, scattered across the page. Going through Inspect Mode one by one is still slow. Annotate Mode lets you work like commenting on a design file: circle multiple components, add annotations to each, then send the entire batch to AI for coordinated changes.

Normal Mode:

inspecto-dev.github.io

Quick Mode:

inspecto-dev.github.io

Use cases: Page-level refactors, post-UI-review batch fixes, multi-component coordinated changes.

Zero-Friction Setup

We know how complex frontend toolchains can be, so Inspecto is designed for minimal onboarding.

Step 1: Navigate to your project root.

Step 2: Run the install command matching your IDE + AI assistant:

🔥 VS Code + Claude Code

npx @inspecto-dev/cli integrations install claude-code --scope project --host-ide vscode

🎯 Cursor Built-in AI

npx @inspecto-dev/cli integrations install cursor --host-ide cursor

🎯 Trae Built-in AI

npx @inspecto-dev/cli integrations install trae --host-ide trae-cn

💡 We also fully support Copilot, Codex, and Gemini, and work with pnpm / yarn / bun. See the full setup docs for details.

Step 3: Start your dev server, open the browser, and enjoy.

Broad Build Tool Support

Vite, Webpack, Rspack, Rollup, esbuild, Next.js, Nuxt — all supported.

Production safety is built in:

Tree-shaking removes all Inspecto code from production builds
Shadow DOM isolation prevents any style pollution
Zero runtime injection — no hooks, no patches, no monkey-patching

⭐ Like It? Give Us a Star!

Inspecto is fully open source. As frontend developers who've been burned by the "find the code" loop too many times, we hope this tool saves you real time every day.

If Inspecto solves a real pain point for you, or you find the design approach interesting, a Star on GitHub helps more people discover it.

👉 github.com/inspecto-dev/inspecto

More links:

📖 Documentation: inspecto-dev.github.io/inspecto
💬 Feedback: GitHub Discussions or Issues

Happy to answer any questions in the comments!

Forem: hugo.felix

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

The Real Bottleneck of AI Coding

What If the Browser Could Talk to Your AI?

The Idea

Introducing: Inspecto

Where It Helps Most

Still Rough — Would Love Feedback

Stop Copy-Pasting Context to AI — Click a Component, AI Knows Where to Fix It

Why Inspecto

What Is Inspecto

Three Core Modes

1. Quick Jump — Source Code Navigation

2. Inspect Mode — Click a Component, Ask AI Directly

3. Annotate Mode — Batch Annotations, Packaged for AI

Zero-Friction Setup

Broad Build Tool Support

⭐ Like It? Give Us a Star!