An open source tool to assist the Cursor. Select elements directly in the browser to call AI Composer!

When I was browsing the posts today, I saw a super NB open source tool, and I must recommend it to you.

Anyone who has used tools like Cursor and Claude knows that these AI code assistants have greatly improved developers’ coding efficiency, but they have a common limitation:

You can’t directly “see” the front-end interface you are developing and get visual context.

In the past, you had to constantly try to explain to the AI ​​"this is the button to be modified" using screenshots or tedious DOM paths, but today's tool will definitely change your workflow.

It provides the "eyes" for the AI ​​code assistant - a browser toolbar that connects your front-end UI and the AI ​​assistant in the code editor.

With Stagewise, you only need to select the element you want to modify on the web page and add a comment, and the AI ​​assistant will accurately locate and modify it. There is no need to copy and paste the DOM path or describe the location of interface elements with difficulty.

The working demonstration effect is as follows:

Stagewise's core technology is based on the Model Context Protocol (MCP), an open protocol developed by Anthropic to standardize how applications provide context to large language models (LLMs). (I believe everyone is tired of hearing about it)

Stagewise has established a complete technical chain:

1. Browser toolbar (@stagewise/toolbar): injected into your front-end application, allowing elements to be selected and annotated

2. VS Code extension: bridges the browser and AI code assistant

3. MCP server: provides context information (DOM structure, screenshots, metadata) to AI code assistant

The Stagewise installation process is divided into two parts:

1. Install the extension

Install the Stagewise extension in the plugin, which will automatically install the Stagewise MCP server

If you use Cursor, it will prompt you to enable the server

Then when I open a project with Cursor, I can see that an MCP configuration file has appeared here

2. Integrate the toolbar into the project

AI-guided method

In the Cursor, press Ctrl+Shift+P, enter setupToolbar, and then press Enter to execute the command.

Manual Installation

Enter the following command in the terminal:

pnpm i -D @stagewise/toolbar

Inject the toolbar into your application in development mode:

// 1. Import the toolbarimport  { initToolbar }  from  '@stagewise/toolbar' ;
// 2. Define your toolbar configurationconst  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 initializesfunction  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 frameworksetupStagewise ();

Supported frameworks

Stagewise provides specialized integration packages for a variety of popular front-end frameworks:

•  Recat : @stagewise/toolbar-react

•  Next.js : @stagewise/toolbar-next

•  Vue.js/Nuxt : @stagewise/toolbar-vue

•  Svelte/SvelteKit : @stagewise/toolbar with Svelte lifecycle functions

Currently Cursor is fully supported, Github Copilot and other platforms are still under development