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

> Source: <https://dev.to/mdsohail99/effortless-ui-context-for-ai-coding-inside-vitelens-for-react-vite-5ac>
> Published: 2026-08-30 05:10:14+00:00

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.

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

This friction slows down the AI-assisted development loop.

Press `Ctrl + Click`

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

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

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.

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).

```
npx vite-lens dev
npm install -D vite-lens
python
// 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' })],
});
```

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`

).

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