What is stagewise
stagewise is a toolbar that connects your app frontend to your favorite code agent, enabling you to visually edit your web app UI using prompts directly on your localhost.
How to use stagewise
- Install the extension: Get the stagewise extension from the extension store of your code editor (supported editors include Cursor, VS Code, Trae, and Windsurf).
- Install and inject the toolbar: The extension will guide you through this process. An AI-assisted setup is recommended (e.g., in Cursor, press CMD + Shift + P and run
setupToolbar). A manual setup guide is also available. The toolbar automatically connects to the extension. - Start dev mode: Begin coding with the toolbar appearing in the bottom right corner of your web app.
Features of stagewise
- Works out of the box with simple setup and minimal configuration.
- Customizable using your own configuration file.
- Can connect to your own MCP server for enhanced capabilities.
- Has zero impact on the bundle size of your production application.
- Provides rich context to your AI agent, including DOM elements, screenshots, and metadata.
- Allows for live comments directly on elements in the browser.
Use Cases of stagewise
stagewise is used for visually prompting AI dev agents to edit web application UI. It enhances the AI-powered coding workflow and improves collaboration between designers and developers. It integrates seamlessly with popular frontend frameworks such as React, Vue, Angular, Svelte, Next.js, and Nuxt, and is compatible with various AI coding assistants like Cursor, Windsurf, GitHub Copilot, Cline, Roo Code, and Trae.
