Effortless UI Context for AI Coding: Inside ViteLens for React & 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: - Open DevTools and manually inspect nested elements. - Copy and paste scattered class names and component names. - 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 Or as a Vite Plugin npm install -D vite-lens // 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' })], }); 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)