Logo

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):

  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:

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.

Introduction

Previous Page

Plugins

Next Page