Vibeocus Lens

Bridge your live frontend directly to your AI agent.

Stop manually copying HTML and taking screenshots of frontend bugs. Vibeocus Lens captures exact DOM nodes, visual state, and annotations from your browser, streaming them straight into your local workspace via MCP.

Installed-style demoChrome extension UILocal bridge ready

Test the extension right now.

We injected the actual extension UI into this page. Click Try Lens or use the floating circle in the bottom-right. Select any element on this screen, type a note, and see how it structures the bug report.

Coming Soon

Last demo payload

Structured context preview

Waiting

{
  "status": "waiting_for_capture",
  "action": "select an element and press Add in the Lens panel",
  "output": "the structured demo payload will appear here"
}

DOM Snippet Extraction

Extracts the exact HTML/computed string of the inspected component so the AI does not have to guess the layout.

Exact CSS Selectors

Captures precise semantic target paths like #hero .btn-primary, making it easier for Cursor or Claude to locate the component.

Visual State Capture

Generates a localized viewport screenshot pinned directly to the DOM context, annotation, and task state.

Zero-Cloud MCP Sync

Uses a secure local bridge on localhost to transfer browser captures into your Vibeocus Mac workspace.

How it works

From browser selection to local MCP context.

Lens turns visual frontend feedback into structured records your desktop workspace and local AI tools can read.

Instant Sandbox Demo

This page runs the core Lens script inline. Use the floating action button in the corner to toggle the inspector.

Inspect & Select

Hover over any UI component. Lens highlights the bounding box and extracts the clean DOM tree snippet.

Annotate & Contextualize

Add your comment, expected behavior, or tasks. Lens links the note to the specific CSS selector and page URL.

Stream via Local Bridge

Install the real extension to route these payloads directly into your desktop app. No cloud backend, 100% local transmission.

Install Lens

Add Vibeocus Lens to Chrome.

Install the extension, then connect it to Vibeocus Desktop from Settings > Lens. Once paired, every browser capture can land in the right project and become agent-readable MCP context.

Coming Soon

What Desktop Unlocks

Standalone Lens saves data to browser storage. Pairing it with the Vibeocus Desktop app opens a local MCP gateway.

It maps target websites to specific code repos, creates active task items, and populates your workspace memory layer automatically.

Why It Stops AI Hallucinations

Prompting an AI with "the button on the login page is broken" leads to hallucinated fixes.

Feeding the agent an exact CSS selector, the raw DOM snippet, and live replication notes via MCP allows tools like Claude Code or Cursor to pinpoint the exact component file and execute a precise refactor on the first try.