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/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
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.