From UI modification to AI efficiency improvement! An open source tool for front-end developers, select web page elements and communicate with AI with one click!

Front-end development + AI assistant is now smoother! Try this "what you see is what you get" open source tool: Stagewise .

When developing front-end pages with AI programming tools such as Cursor, Windsurf, and Trae, we may just want to change the style of a button, but we still have to manually describe where it is on the page, what the class name is, and which line the code is on...

Not only is this type of conversation inefficient, but the AI ​​often fails to understand.

Stagewise   was born to solve this problem: it allows you to click on page elements and send them directly to the AI ​​assistant for modification, just like in Figma or Chrome DevTools !

What is Stagewise?

Stagewise is a browser UI element capture and AI collaboration tool designed specifically for front-end developers. It allows you to click on any element on a web page to quickly generate:
element screenshots, DOM path structure, metadata (such as className, style, id, component name, etc.).

And you can send this information to AI coding assistants like Cursor and Windsurf with one click, allowing it to directly locate and modify the style or component logic.

It seamlessly integrates Cursor, GitHub Copilot and Windsurf, supports mainstream frameworks such as React, Next.js, Vue, Nuxt.js, and also provides a flexible plug-in system tailored for front-end developers.

It makes UI modification extremely smooth and improves efficiency.

Core Features

• •  One-click element selection : directly select any UI element in the browser and send it to the AI ​​assistant.
• •  Seamless connection to VSCode : Automatically connect to VS Code extension without additional configuration.
• •  Support for multiple front-end frameworks : Supports multiple front-end frameworks: React, Vue, Next.js, SvelteKit, etc.
• •  Custom plug-in system : supports developers to add custom plug-ins, expand functions, and maximize flexibility.
• •  Context-accurate delivery : Provide DOM elements, screenshots, and metadata to AI agents.
• •  Zero packaging burden : It only takes effect in development mode, does not affect the packaging volume of the production environment, and maintains application performance.

Quick Start

Because it is mainly designed for front-end developers, the installation method is relatively simple for developers.

① Install vs-code extension

Install the Stagewise extension from the VS Code marketplace (marketplace.visualstudio.com). After installation, the extension will automatically deploy the MCP server, just click "Enable".

② Install and inject toolbar

In the Cursor, press CMD + Shift + P, enter setupToolbar, execute the command, and the toolbar will be automatically initialized.

Or you can install it through the code repository

pnpm i -D @stagewise/toolbar

Inject the toolbar into your application development mode

// 1. Import the toolbar
import { initToolbar } from  '@stagewise/toolbar' ;

// 2. Define your toolbar configuration
const stagewiseConfig = {
  plugins: [
    {
      name:  'example-plugin' ,
      description:  'Adds additional context for your components' ,
      shortInfoForPrompt: () => {
        return "Context information about the selected element" ; 
      },
      mcp: null,
      actions: [
        {
          name:  'Example Action' ,
          description:  'Demonstrates a custom action' ,
          execute: () => {
            window.alert( 'This is a custom action!' );
          },
        },
      ],
    },
  ],
};

// 3. Initialize the toolbar when your app starts
// Framework-agnostic approach - call this when your app initializes
function setupStagewise () { 
  // Only initialize once and only  in  development mode
  if  (process.env.NODE_ENV ===  'development' ) {
    initToolbar(stagewiseConfig);
  }
}

// Call the setup  function  when appropriate  for  your framework
setupStagewise();

Finally, open the web page and click on the UI elements as needed. Stagewise will automatically generate screenshots and DOM information and send them to Cursor or Windsurf in VS Code.

The AI ​​assistant will generate code based on the context, which can be applied directly or with slight adjustments.

Development Scenario

• •  When debugging UI styles : quickly locate misplaced elements, strange margins, and other issues
• •  When fine-tuning components : No need to tell AI class names or component names, just pass context with one click
• •  When collaborating with multiple people or connecting with designers : select the problematic element and add an annotation, and AI will directly modify it.
• •  Low-code platform developers : Accurately modify component behavior in mixed UI and logic scenarios

Last words

The complexity of front-end development has been soaring: from React to Next.js, from Vue to SvelteKit, there are many frameworks and endless demands for UI adjustments.

Although traditional AI development tools can generate code, they often require developers to manually provide context, such as DOM structure, element location, or screenshots. This "manual feeding" process is not only time-consuming, but also prone to errors.

The emergence of multi-agent collaboration and browser integration is like equipping AI assistants with "eyes", allowing them to "see" your web pages directly and accurately understand your needs.

Stagewise is such a tool that connects your browser and AI assistant. It will automatically capture the DOM structure, screenshots and metadata, send them to the AI ​​assistant, and generate corresponding code changes.

If you are using AI assistants such as Cursor and Windsurf for development, Stagewise will be your best partner to improve efficiency.