Visual Agentic Dev

Visual Agentic Dev is an immersive browser development environment designed to allow developers to complete code modifications, debugging, and command-line interactions without leaving the browser. Its core click-to-locate + agent edit loop is exactly the kind of workflow that makes AI agents feel genuinely useful—moving beyond a simple "chat in a box" to become a powerful, integrated part of the development lifecycle.

Core Features

• 🎯 Zero-Config Source Location: Utilizes React Fiber to automatically identify source code locations without inserting redundant attributes into business code.
• 📂 Multi-Project Parallel Development: Automatically identifies the project belonging to the current Tab and intelligently switches to the corresponding terminal session.
• 🤖 Dynamic Agent Registry: Extensible architecture supporting multiple AI agents (Claude Code, CCR, etc.) with dynamic readiness detection.
• 🖱️ Batch Element Modification: Supports selecting multiple page elements and sending them to the agent for batch modification.
• ⌨️ Convenient Shortcuts: Quick access via Cmd + Shift + S (Mac) or Ctrl + Shift + S (Windows/Linux).
• 🛠 Built-in Terminal Integration: Deeply integrated terminal with session persistence, history restoration, and smart context switching.

Demo

demo task description: add one more todo item, not done state, task name is "hey it's new one", clike this new item show dialog and say "you click me"

demo.mp4

Quick Start (Release)

1. Install Chrome Extension

• Download from Chrome Web Store (Coming Soon)
• Or download extension.zip from GitHub Releases and load strictly.

2. Install Bridge Server

# Global install (Recommended)
npm install -g @visual-agentic-dev/bridge-server

# Start server
vdev-server

3. Integrate into React Project

npm install @visual-agentic-dev/react-devtools

// App.tsx
import { DevToolsProvider } from '@visual-agentic-dev/react-devtools';

export default function App() {
  return (
    <DevToolsProvider enabled={process.env.NODE_ENV === 'development'}>
      <YourApp />
    </DevToolsProvider>
  );
}

4. Not Work? Configure Build Plugin (For React 19+)

React 19+ requires a build plugin for accurate source location due to a breaking change where _debugSource was removed (see facebook/react#32574). We provide a universal plugin to restore this functionality.

Vite Example:

// vite.config.ts
import { vitePlugin as visualDev } from '@visual-agentic-dev/react-devtools/unplugin';

export default defineConfig({
  plugins: [visualDev()],
});

For other bundlers (Webpack, Rspack, etc.), please see packages/react-devtools/README.md.

---

Quick Start (Local Development)

1. Install Dependencies

pnpm install

2. Build All Packages

pnpm build

3. Start Bridge Server

# Build and run
pnpm --filter @visual-agentic-dev/bridge-server build
node packages/bridge-server/bin/vdev-server.js

4. Integrate into Your React Project

Simply install the SDK and introduce the Provider in your App.

# In your React project
npm install /path/to/visual-agentic-dev/packages/react-devtools

// App.tsx
import { DevToolsProvider } from '@visual-agentic-dev/react-devtools';

function App() {
  return (
    <DevToolsProvider enabled={process.env.NODE_ENV === 'development'}>
      <YourApp />
    </DevToolsProvider>
  );
}

Note for React 19+: You must also configure the build plugin. See Build Tool Configuration above.

5. Install Chrome Extension

1. Open Chrome and visit chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select the packages/extension/dist directory

---

Usage

1. Configure Agent

1. Open the extension sidebar.
2. Click the Settings (⚙️) icon.
3. Select your preferred agent (e.g., ccr code or claude).
4. The terminal session will automatically reset and switch to the selected agent.

2. Start Developing

1. Start your React development server
2. Start the Bridge Server
3. Open Chrome and visit localhost
4. Click the extension icon to open the sidebar (it will automatically identify the project path and restore history state)
5. Click the 🔍 button or use the shortcut Cmd + Shift + S to select page elements
6. Describe your modification requirements in the chat box

Package Structure

• @visual-agentic-dev/react-devtools - React SDK (Runtime Source Location)
• @visual-agentic-dev/bridge-server - WebSocket Server (Connects Browser and Claude CLI)
• visual-agentic-dev-extension - Chrome Extension (Sidebar UI)

Contributing

We love contributions! Please read our Contributing Guide to get started.

License

© 2026 Bruce Too

Licensed under PolyForm Shield 1.0.0