brucetoo

brucetoo / visual-agentic-dev

Public

an immersive browser dev environment with a seamless click-to-locate + agent edit loop.

agent ai claude claude-code devtools
71
0
100% credibility
Found Feb 12, 2026 at 41 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A browser extension and React toolkit that enables visual selection of page elements and AI-driven code modifications through an integrated chat and terminal interface.

How It Works

1
🔍 Discover Visual Agentic Dev

You find this cool tool on GitHub that lets you click on webpage parts and chat to change your app without typing code.

2
🧩 Add the browser helper

You grab the free Chrome extension and pop it into your browser with a quick drag-and-drop.

3
⚙️ Start the magic connector

You run a simple helper program on your computer to link your browser to smart code changers.

4
🔗 Link it to your web app

You wrap your app in a tiny helper so it knows where every button and box lives in the code.

5
🎯 Click to pick page pieces

Open your app in the browser, slide out the sidebar, and click on elements like buttons or lists to highlight them.

6
💬 Tell it what to change

Type simple instructions in the chat, like 'add a new task here' or 'make this button pop', and watch the AI get to work.

✨ Your app updates live

The smart helper rewrites your code automatically in the background terminal, and your page refreshes with perfect changes.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 41 to 71 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is visual-agentic-dev?

Visual Agentic Dev is an immersive browser development environment for React apps, built in TypeScript with a Chrome extension, bridge server, and devtools package. Developers click on page elements to pinpoint source locations automatically, describe changes in a sidebar chat, and let an agentic CLI like Claude execute modifications, debugging, or commands—all without leaving the browser or switching tabs. It solves the context-switching pain of visual prototyping by bridging browser inspection directly to code execution.

Why is it gaining traction?

Unlike traditional devtools or AI code assistants that require manual file hunting, it offers zero-config source mapping via React Fiber, batch element selection, persistent terminals per project, and hotkeys like Cmd+Shift+S for instant inspect mode. Multi-project support auto-detects paths from localhost ports, and deep terminal integration restores sessions seamlessly. The agentic workflow—select visually, chat naturally, watch AI edit—feels like github immersive engineering in your browser, pulling devs from scattered tools into one fluid space.

Who should use this?

Frontend devs building React UIs with Vite or Webpack who prototype iteratively and use agentic tools like Claude CLI. Solo makers or small teams tired of copy-pasting selectors between browser and editor, especially for immersive browser games, chat interfaces, or vehicle sims where visual tweaks demand quick code iteration. Avoid if you're not on localhost dev servers or lack AI CLI setup.

Verdict

Try it for React prototyping if you have Claude ready—early demos shine, but with 18 stars and 1.0% credibility score, it's raw: docs are solid for setup, but expect tweaks for production stability. Promising agentic bridge for immersive browser android or web github flows, worth watching as it matures.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.