Skip to content
| Marketplace
Sign in
Visual Studio Code>Debuggers>stagewiseNew to Visual Studio Code? Get it now.
stagewise

stagewise

stagewise

|
513 installs
| (5) | Free
Eyesight for your AI-powered Code Editor.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

stagewise logo stagewise

Eyesight for your AI-powered Code Editor.

VS Code Marketplace Version GitHub Repo stars Join us on Discord

stagewise demo

About the project

stagewise is a browser toolbar that connects your frontend UI to your code ai agents in your code editor.

  • 🧠 Select any element(s) in your web app
  • 💬 Leave a comment on it
  • 💡 Let your AI-Agent do the magic

Perfect for devs tired of pasting folder paths into prompts. stagewise gives your AI real-time, browser-powered context.

✨ Features

The stagewise Toolbar makes it incredibly easy to edit your frontend code with AI agents:

  • ⚡ Works out of the box
  • 🛠️ Customise using your own configuration file
  • 🔌 Connect to your own MCP server
  • 📦 Does not impact bundle size
  • 🧠 Sends DOM elements, screenshots & metadata to your AI agent
  • 👇 Comment directly on live elements in the browser
  • 🧪 Comes with playgrounds for React, Vue, and Svelte (./playgrounds)

📖 Quickstart

1. 🧩 Install the vs-code extension

Install the extension here: https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension

[!NOTE] 💬 Enable MCP support (Cursor):

  • The extension will auto-install a stagewise MCP server.
  • Cursor will prompt you to enable the server.
  • Click enable to let your agent call MCP-tools that the toolbar provides. (Read more)

2. 👨🏽‍💻 Install and inject the toolbar

[!TIP] 🪄 Auto-Install the toolbar (AI-guided):

  1. In Cursor, Press CMD + Shift + P
  2. Enter setupToolbar
  3. Execute the command and the toolbar will init automatically 🦄

Or follow the manual way:

Install @stagewise/toolbar:

pnpm i -D @stagewise/toolbar

Inject the toolbar into your app dev-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();

⚡️ The toolbar will automatically connect to the extension!

Framework-specific integration examples

For easier integration, we provide framework-specific NPM packages that come with dedicated toolbar components (e.g., <StagewiseToolbar>). You can usually import these from @stagewise/[framework-name].

React.js

We provide the @stagewise/toolbar-react package for React projects. Initialize the toolbar in your main entry file (e.g., src/main.tsx) by creating a separate React root for it. This ensures it doesn't interfere with your main application tree.

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { StagewiseToolbar } from '@stagewise/toolbar-react';
import './index.css';

// Render the main app
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

// Initialize toolbar separately
const toolbarConfig = {
  plugins: [], // Add your custom plugins here
};

document.addEventListener('DOMContentLoaded', () => {
  const toolbarRoot = document.createElement('div');
  toolbarRoot.id = 'stagewise-toolbar-root'; // Ensure a unique ID
  document.body.appendChild(toolbarRoot);

  createRoot(toolbarRoot).render(
    <StrictMode>
      <StagewiseToolbar config={toolbarConfig} />
    </StrictMode>
  );
});
Next.js

Use the @stagewise/toolbar-next package for Next.js applications. Include the <StagewiseToolbar> component in your root layout file (src/app/layout.tsx).

// src/app/layout.tsx
import { StagewiseToolbar } from '@stagewise/toolbar-next';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <StagewiseToolbar
          config={{
            plugins: [], // Add your custom plugins here
          }}
        />
        {children}
      </body>
    </html>
  );
}
Nuxt.js

For Nuxt.js projects, you can use the @stagewise/toolbar-vue package. Place the <StagewiseToolbar> component in your app.vue or a relevant layout file.

// app.vue
<script setup lang="ts">
import { StagewiseToolbar, type ToolbarConfig } from '@stagewise/toolbar-vue';

const config: ToolbarConfig = {
  plugins: [], // Add your custom plugins here
};
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <ClientOnly>
      <StagewiseToolbar :config="config" />
    </ClientOnly>
    <NuxtWelcome />
  </div>
</template>
Vue.js

Use the @stagewise/toolbar-vue package for Vue.js projects. Add the <StagewiseToolbar> component to your main App component (e.g., App.vue).

// src/App.vue
<script setup lang="ts">
import { StagewiseToolbar, type ToolbarConfig } from '@stagewise/toolbar-vue';

const config: ToolbarConfig = {
  plugins: [], // Add your custom plugins here
};
</script>

<template>
  <StagewiseToolbar :config="config" />
  <div>
    <!-- Your app content -->
  </div>
</template>
SvelteKit

For SvelteKit, you can integrate the toolbar using @stagewise/toolbar and Svelte's lifecycle functions, or look for a dedicated @stagewise/toolbar-svelte package if available. Create a component that conditionally renders/initializes the toolbar on the client side (e.g., src/lib/components/StagewiseToolbarLoader.svelte or directly in src/routes/+layout.svelte).

Using onMount in +layout.svelte (with @stagewise/toolbar):

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  import { initToolbar, type ToolbarConfig } from '@stagewise/toolbar'; // Adjust path if needed

  onMount(() => {
    if (browser) {
      const stagewiseConfig: ToolbarConfig = {
        plugins: [
          // Add your Svelte-specific plugins or configurations here
        ],
      };
      initToolbar(stagewiseConfig);
    }
  });
</script>

<slot />

Using a loader component (example from repository): The example repository uses a ToolbarLoader.svelte which wraps ToolbarWrapper.svelte. ToolbarWrapper.svelte would then call initToolbar from @stagewise/toolbar.

<!-- examples/svelte-kit-example/src/lib/components/stagewise/ToolbarLoader.svelte -->
<script lang="ts">
import type { ToolbarConfig } from '@stagewise/toolbar';
// ToolbarWrapper.svelte is a custom component that would call initToolbar
import ToolbarWrapper from './ToolbarWrapper.svelte'; 
import { browser } from '$app/environment';

const stagewiseConfig: ToolbarConfig = {
  plugins: [
    // ... your svelte plugin config
  ],
};
</script>

{#if browser}
  <ToolbarWrapper config={stagewiseConfig} />
{/if}

You would then use StagewiseToolbarLoader in your src/routes/+layout.svelte.

🤖 Agent support

Agent Supported
Cursor ✅
Windsurf ✅
GitHub Copilot 🚧 In Progress
Cline ❌
BLACKBOXAI ❌
Console Ninja ❌
Continue.dev ❌
Amazon Q ❌
Cody ❌
Qodo ❌

🛣️ Roadmap

Check out our project roadmap for upcoming features, bug fixes, and progress.

📜 License

stagewise is developed by Goetze, Scharpff & Toews GbR under an Open Core model:

  • 🧩 99% is open-source under AGPLv3
  • 🏢 1% (enterprise features) is commercial

This allows us to:

  • Keep core tech open and transparent
  • Ensure sustainability and quality
  • Prevent misuse by closed-source platforms

We believe this model creates a fair, open ecosystem that benefits both individuals and companies.

🤝 Contributing

We're just getting started and love contributions! Check out our CONTRIBUTING.md guide to get involved. For bugs and fresh ideas, please Open an issue!

💬 Community & Support

  • 👾 Join our Discord
  • 📖 Open an issue on GitHub for dev support.

📬 Contact Us

Got questions or want to license stagewise for commercial or enterprise use?

📧 sales@stagewise.io

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft