vite-plugin-devlens

AI-powered error explainer and live Lighthouse auditor for Vite dev servers.

One shared daemon handles all your projects. No copy-pasting errors. No waiting until build for Lighthouse. Real component names because Vite never minifies in dev.

Architecture

Vite project A (port 3000) ─┐
Vite project B (port 3001) ──┼──→  devlens daemon (port 7700)  ──→  Ollama / Claude / OpenAI
Vite project C (port 3002) ─┘

API key configured once. Concurrency + queue handled in one place.

The daemon runs as a single background process. All Vite instances connect to it. Requests are queued so multiple simultaneous errors from different projects don't hammer your API or Ollama.

Install

npm install -D vite-plugin-devlens

Step 1 — Configure the daemon (once)

# Free — use local Ollama (default)
npx devlens set provider ollama
npx devlens set ollamaModel llama3   # or codellama, mistral, etc.

# Paid — Claude
npx devlens set provider claude
npx devlens set apiKey sk-ant-...

# Paid — OpenAI
npx devlens set provider openai
npx devlens set apiKey sk-...

Config is saved to ~/.devlensrc and shared across all projects.

Step 2 — Start the daemon (once per machine session)

npx devlens

Output:

⬡ devlens daemon  running on http://localhost:7700
  Provider  : ollama
  Ollama    : http://localhost:11434 / model: llama3
  Queue     : concurrency=3, timeout=30000ms

  Waiting for Vite projects to connect...

Step 3 — Add the plugin to each Vite project

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import devlens from 'vite-plugin-devlens'

export default defineConfig({
  plugins: [react(), devlens()]   // zero config — connects to daemon automatically
})

Step 4 — Optional: React ErrorBoundary

// main.jsx
import { DevlensErrorBoundary } from 'vite-plugin-devlens/react'

ReactDOM.createRoot(document.getElementById('root')).render(
  <DevlensErrorBoundary>
    <App />
  </DevlensErrorBoundary>
)

CLI commands

npx devlens                         Start the daemon
npx devlens set provider ollama     Switch to Ollama (free)
npx devlens set provider claude     Switch to Claude
npx devlens set provider openai     Switch to OpenAI
npx devlens set apiKey <key>        Set API key
npx devlens set ollamaModel llama3  Set Ollama model
npx devlens set concurrency 5       Allow 5 concurrent AI requests
npx devlens config                  Show current config
npx devlens status                  Check if daemon is running + connected clients
npx devlens stats                   Show queue stats (total, running, queued, failed)

Providers

| Provider | Cost | Requirement | |----------|------|-------------| | Ollama (default) | Free | ollama serve + ollama pull llama3 | | Claude | Paid API | Key from console.anthropic.com | | OpenAI | Paid API | Key from platform.openai.com |

Why Vite only

Webpack minifies component names even in dev — stack traces show t instead of UserProfileCard. Vite preserves real names. This makes AI explanations dramatically more accurate.

Why a daemon

• One API key shared across all projects
• Request queue prevents rate limit errors when multiple projects fire errors simultaneously
• Lighthouse audits (which spawn Chrome) are serialized automatically
• npx devlens stats shows you exactly what's queued and running

Options (vite.config.js)

| Option | Default | Description | |--------|---------|-------------| | daemonPort | 7700 | Port the daemon is running on |

License

MIT