Hey Product Hunt! 👋

I’m Ekhtiram, the solo creator of Vibeocus.

Like many of you, I’ve been heavily using AI agents (Cursor, Claude Desktop, Claude Code) to build web apps lately. The execution speed is incredible, but I constantly hit a massive friction point when working on the frontend.

Every time a UI element broke, or validation didn't work, I had to take a screenshot, open the browser inspect tool, manually copy the raw HTML/CSS snippet, switch to my AI tool, and type a long prompt explaining *what* and *where* the issue was. It completely destroyed the "vibe-coding" momentum.

I wanted a way to bridge my live browser frontend directly to my AI's project memory. That’s why I built Vibeocus Lens.

Now, instead of wasting time copy-pasting, you can just click any element on your page, add a quick annotation, and Lens automatically extracts the exact DOM nodes, semantic CSS selectors, and visual state. It then streams everything via a secure local bridge directly into your Vibeocus project workspace, making it immediately accessible to your AI tools over MCP. 100% local, no cloud backend, zero RAM hogging.

Fun fact: You can actually test the core extension UI live right on our landing page without even installing it yet!

I’m here all day and would absolutely love your honest feedback. How do you currently handle feeding UI/frontend context to your AI tools? What features should I add to Lens next?

Let's chat in the comments! 🚀

Vibeocus Lens

Bridge your live frontend directly to your AI agent.

Bridge your live frontend directly to your AI agent.