Quickstart
1. Install the VS Code Extension
Install the extension here: VS Code Marketplace
2. Install and Inject the Toolbar
💡 Tip: In VS Code, you can open the Command Palette by pressing CMD + Shift + P (or Ctrl + Shift + P on Windows/Linux).
🪄 Auto-Install the toolbar (AI-guided):
- In Cursor, Press
CMD + Shift + P- Enter
setupToolbar- Execute the command and the toolbar will init automatically 🦄
Or follow the manual way:
pnpm i -D @stagewise/toolbarInject 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
function setupStagewise() {
if (process.env.NODE_ENV === 'development') {
initToolbar(stagewiseConfig);
}
}
// Call the setup function
setupStagewise();⚡️ The toolbar will automatically connect to the extension!
Framework-specific integration examples
You can integrate Stagewise with your favorite frontend framework. See below for examples:
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.
We recommend installing the React plugin (@stagewise-plugins/react) for improved agent behavior and additional support 🚀
// 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 />
<StagewiseToolbar />
</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).
We recommend installing the React plugin (@stagewise-plugins/react) for improved agent behavior and additional support 🚀
// 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 />
{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.
We recommend installing the Vue plugin (@stagewise-plugins/vue) for improved agent behavior and additional support 🚀
<!-- app.vue -->
<script setup lang="ts">
import { StagewiseToolbar } from '@stagewise/toolbar-vue';
</script>
<template>
<div>
<NuxtRouteAnnouncer />
<ClientOnly>
<StagewiseToolbar/>
</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).
We recommend installing the Vue plugin (@stagewise-plugins/vue) for improved agent behavior and additional support 🚀
<!-- src/App.vue -->
<script setup lang="ts">
import { StagewiseToolbar } from '@stagewise/toolbar-vue';
</script>
<template>
<StagewiseToolbar />
<div>
<!-- Your app content -->
</div>
</template>Angular
Use the @stagewise/toolbar package for Angular projects. Conditionally call the initToolbar() function in main.ts whenever you want the toolbar to be active.
We recommend installing the Angular plugin (@stagewise-plugins/angular) for improved agent behavior and additional support 🚀
// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { initToolbar } from '@stagewise/toolbar';
import { AngularPlugin } from '@stagewise-plugins/angular';
// Only initialize in development mode (customize as needed)
if (!('production' in window) || !window.production) {
initToolbar({
plugins: [AngularPlugin]
});
}
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);For more, check out our examples repo for Next.js, Nuxt, Angular and SvelteKit.