DEV Community: mdsohail99

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

mdsohail99 — Sun, 30 Aug 2026 05:10:14 +0000

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:

GitHub: https://github.com/mdsohail99/vite-lens
npm: https://www.npmjs.com/package/vite-lens

Parallel AI Agents and Context Bloat: Architecting OpenCode Orchestration

mdsohail99 — Fri, 07 Aug 2026 08:29:48 +0000

Parallel AI agents are no longer a novelty. But as anyone who has attempted multi-agent orchestration knows, you inevitably hit two massive architectural bottlenecks: AI context bloat and pipeline stalling (when one agent fails, everyone waits).

Today, I’m sharing the OpenCode Agent-Teams Relay. The goal of this open-source project is to save time by deploying a highly specialized engineering team that never waits for stragglers.

While your native OpenCode agents remain exactly as they are, the dedicated agent-teams orchestrator can now utilize a background relay server to fan out tasks to 70+ curated personas in tightly scoped, task-oriented sessions.

Solving Pipeline Stalls with Dynamic Escalations

The secret to the speed isn't just the parallelism—it's the escalation architecture. Agent teams do not wait for each other. If a sub-agent fails or hits a cross-domain blocker, it escalates immediately. The main OpenCode orchestrator then dynamically fixes, restarts, or resumes that specific task while the rest of the team continues working asynchronously.

Benchmarking Parallel AI Agents (Scaling to the Prompt)

The engine scales the number of agents dynamically based on the complexity of your task. Let's look at one recent test session:

18 Concurrent Sessions: 1 main orchestrator fanned out 4 department leads, which spun up 13 specialists.
8 Dynamic Escalations: Blockers were routed and resumed on the fly.
Wall-Clock Speed: The entire run completed in ~15 minutes. A single agent running this serially would take an estimated 45-60 minutes due to CPU/LLM bottlenecks and context pressure.

The Honest Trade-Off: Tokens for Throughput

Team orchestration is not "faster & cheaper on tokens." I want to be entirely transparent about the cost.

The real exchange is this: You explicitly trade total tokens produced for elapsed wall-clock time, fault isolation, and the elimination of context bloat.

With this relay engine, you spend more tokens, but you get:

≈4× less time to first complete output.
~0 sessions lost to context overflow because every session is strictly task-oriented.

🔗 Source code and architecture on GitHub

How do you handle agent failures and context limits in your workflows? Let's discuss in the comments.

I wanted to own my AI automations instead of paying monthly SaaS fees—so I built a free, self-hosted stack

mdsohail99 — Wed, 15 Jul 2026 16:20:02 +0000

Every morning, I spent 20 minutes checking AI news, live model pricing, and new releases across Hacker News, Techmeme, and Reddit.

It was repetitive, tedious, and hard to track.

So I decided to automate the entire thing. But looking at the monthly bills for hosted automation tools like Zapier or Make, I realized those costs scale fast. I wanted complete ownership of my data, schedules, and integrations, and I didn't want to pay monthly SaaS fees.

I built a completely free, self-hosted AI automation stack.

The Stack

The stack runs 24/7 on an always-free Oracle Cloud VPS. It coordinates:

A Python research engine that scrapes news sources.
OpenRouter free model routing to generate structured summaries.
A Notion database tracking 18 properties.
Instant Slack alerts containing the daily briefing highlights.

In this guide, I'll walk you through how you can own your automation stack too...

Repo Links:

Dev.to: https://github.com/mdsohail99/free-vps-n8n-pipeline?ref=devto