Visual Agentic Dev — Streamline browser based…

Pitch

Description

Comments

About this project

Visual Agentic Dev offers a seamless browser development environment that facilitates code modifications and debugging directly within the browser. With intelligent project recognition, dynamic agent integration, and built-in terminal functionality, it enhances productivity and simplifies complex workflows for developers.

Visual Agentic Dev is an immersive browser development environment tailored for developers seeking an efficient way to make code modifications, debug, and interact through the command line—all within the browser. This powerful tool enhances productivity by integrating seamlessly with React applications, allowing developers to interact with page elements dynamically.

Key Features

Zero-Config Source Location: Leverages React Fiber for auto-detection of source code locations without cluttering business logic with additional attributes.
Multi-Project Parallel Development: Automatically recognizes the project associated with the current browser tab, facilitating context-aware terminal session switching.
Dynamic Agent Registry: Supports various AI agents (e.g., Claude Code, CCR) within an extensible architecture, ensuring they are ready for use as needed.
Batch Element Modification: Enables selection of multiple elements on the page for simultaneous modifications via the agent.
Convenient Shortcuts: Provides quick access functions with keyboard shortcuts, such as Cmd + Shift + S for Mac and Ctrl + Shift + S for Windows/Linux.
Built-in Terminal Integration: Features an integrated terminal that maintains session persistence, restores command history, and allows smart context switching.

Demonstration

The tool’s capabilities can be seen in action with the following demo task: adding a new to-do item labeled "hey it's new one" in a not-done state. Click the new item to trigger a dialog that states, "you click me."

Demo

Structure Overview

The project is organized into key components:

@visual-agentic-dev/react-devtools: React SDK designed for runtime source location detection.
@visual-agentic-dev/bridge-server: WebSocket server facilitating communication between the browser and the command-line interface.
visual-agentic-dev-extension: Chrome Extension that provides the sidebar user interface.

Contribution Guidelines

Contributions are welcome to help enhance the functionality of Visual Agentic Dev. Developers interested in contributing can refer to the Contributing Guide for more information on how to get started.