I built a tool to solve a specific annoyance: context switching between the browser (where I see the bug) and VS Code (where I fix it).

It's called Visual Agentic Dev.

The TL;DR: It lets you click any component in a running React app and instruct an AI agent (like Claude Code) to modify the source code directly.

The "Magic" (How it works): Instead of requiring invasive Babel plugins to inject data-source attributes at build time, I used a runtime approach:

The Chrome extension traverses the DOM to find the __reactFiber$ property. It walks up the Fiber tree to find the _debugSource (fileName, lineNumber). It sends this location + the component's code context to a local Bridge Server. The Bridge Server spins up a PTY (using node-pty) and feeds this context to the Claude Code CLI. This means it works with most "standard" React dev setups (Vite, Next.js dev mode) with zero configuration.

Why I made this: I found that cursor and windsurf are great, but they are still "text-editor first". Frontend development is inherently visual. I wanted a "browser-first" workflow where I can fix UI glitches without ever leaving the mental model of the rendered page.

Repo (MIT/PolyForm Shield): https://github.com/brucetoo/visual-agentic-dev

Demo (GIF): https://i.imgur.com/Iyu3HOZ.gif

I'd love to hear your thoughts on the architecture or the workflow. Is runtime Fiber crawling stable enough for your daily drivers?