DEV Community

Cover image for Effortless UI Context for AI Coding: Inside ViteLens for React & Vite
mdsohail99
mdsohail99

Posted on

Effortless UI Context for AI Coding: Inside ViteLens for React & Vite

#vite

When prompting AI coding tools like OpenAI Codex, Cursor, Claude Code, or GitHub Copilot to refactor a frontend component, providing accurate visual context (DOM hierarchy, CSS classes, container dimensions) is often a bottleneck.

ViteLens solves this by letting you Ctrl + Click multiple UI elements on localhost and 1-click copy structured Markdown context tables directly into your prompt.

The Problem: Feeding Visual Context to LLMs

When asking an AI model to restyle a complex React/Vue/Svelte view, developers frequently have to:

  1. Open DevTools and manually inspect nested elements.
  2. Copy and paste scattered class names and component names.
  3. Manually describe which containers wrap which buttons.

This friction slows down the AI-assisted development loop.

How ViteLens Solves It

1. Multi-Select & 1-Click AI Context Copy

Press Ctrl + Click across any UI elements on your page to select them simultaneously. ViteLens generates a clean, structured Markdown table containing:

  • Component names & DOM tag hierarchies
  • Tailored CSS classes & inline styles
  • Exact pixel bounding boxes and layout dimensions

You can paste this directly into Codex, Cursor, or Claude Code for instant, high-accuracy refactoring.

2. UI Flow Recording → Playwright & Cypress

Need to write E2E tests? Click Record User Flow, click through your workflow in the browser, and export a ready-to-run Playwright or Cypress test suite.

3. Alt + Click Editor Jump

Hover over any element and press Alt + Click to jump directly to the source file, line, and column in your editor (Cursor, VS Code, Windsurf, WebStorm, Zed, Sublime).

Quick Setup

Zero-Config CLI 

npx vite-lens dev
Enter fullscreen mode Exit fullscreen mode

Or as a Vite Plugin 

npm install -D vite-lens
Enter fullscreen mode Exit fullscreen mode 
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteLens } from 'vite-lens';

export default defineConfig({
  plugins: [react(), viteLens({ editor: 'auto' })],
});
Enter fullscreen mode Exit fullscreen mode

Fail-Closed Production Safety

Developer tools should never leak into production. ViteLens uses Vite's apply: 'serve' lifecycle hook to ensure all runtime code is physically omitted from production bundles (vite build).

Try It Out

ViteLens is 100% open-source under the MIT license:

Top comments (0)