GitHub - stagewise-io/stagewise: stagewise is the first frontend coding agent for existing production-grade web apps ๐ช -- Lives inside your browser ๐ป -- Makes changes in local codebase ๐ค -- Compatible with all kinds of frameworks and setups ๐ช
Key Points
- 1stagewise is a browser-based frontend coding agent that enables direct modification of local codebases for existing production-grade web applications.
- 2It allows developers to specify changes and select elements directly in the browser, providing real-time context to the agent without requiring manual input of element information or file paths.
- 3This open-source tool, compatible with various frameworks and extensible via plugins, operates under the AGPLv3 license and supports integration with multiple AI agents.
Stagewise is presented as the inaugural frontend coding agent specifically designed for interacting with and modifying existing production-grade web applications. Its core methodology revolves around providing a real-time, browser-powered contextual interface for AI agents to understand and directly manipulate a web application's local codebase.
The system operates by integrating into a developer's existing workflow without requiring changes to the application's build process or framework. The user initiates their web application in standard development mode, and then starts stagewise via a command-line interface tool (e.g., npx stagewise@latest) in a parallel terminal. This setup implies that stagewise runs a local server that mediates communication between the user's browser, an AI agent, and the local file system.
The interactive methodology involves three key steps:
- Intent Communication: The user expresses their desired change to the agent using natural language prompts.
- Contextual Selection: The user directly interacts with the live web application in their browser, clicking on specific elements relevant to the desired change. This action provides stagewise with rich, real-time DOM-based context about the selected elements, their properties, and their visual position within the application. This eliminates the need for manual extraction and pasting of element selectors or file paths.
- Automated Modification: Leveraging this precise, browser-derived context, stagewise, either through its dedicated frontend agent or via an open agent interface compatible with external agents (e.g., Cursor, GitHub Copilot), translates the user's intent and contextual selection into concrete modifications within the local codebase. This process implies an underlying mechanism for mapping live DOM elements back to their corresponding source code files and locations, and then programmatically applying changes to those files on the developer's local machine.
Technically, stagewise functions as a bridge that provides AI agents with:
- Browser-based Observability: Access to the live Document Object Model (DOM), CSS Object Model (CSSOM), and potentially runtime states of the web application.
- Local Codebase Write Access: The ability to modify files within the developer's project directory, triggered by agent decisions. This is facilitated by the
npxorpnpm dlxcommand that initiates stagewise, granting it the necessary local permissions. - Framework Agnosticism: By operating at the browser and file system levels, stagewise maintains compatibility with diverse frontend frameworks and setups, as it does not directly parse or interpret framework-specific syntaxes but rather observes their rendered output and modifies the underlying source files.
The platform is designed to be extensible through a plugin architecture, allowing for customization and expansion of its capabilities. It is open-source and distributed under the AGPL-3.0 license.