@stagewise/toolbar-react
Advanced tools
stagewise
stagewise is a browser toolbar that connects your frontend UI to your code ai agents in your code editor.
Perfect for devs tired of pasting folder paths into prompts. stagewise gives your AI real-time, browser-powered context.
The stagewise Toolbar makes it incredibly easy to edit your frontend code with AI agents:
Install the extension here: https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension
[!TIP] 🪄 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:
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: [],
};
// 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!
[!IMPORTANT] 🚫 If nothing happens when a prompt is sent:
If you have multiple Cursor windows open, the toolbar may send prompts to the wrong window, making it appear as if "no prompt is being sent". To ensure reliable operation:
- Keep only one Cursor window open when using stagewise
A fix for this is on the way!
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/toolbar-[framework-name].
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>
);
});
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>
);
}
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>
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>
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 | Supported |
|---|---|
| Cursor | ✅ |
| GitHub Copilot | ✅ |
| Windsurf | ✅ |
| Cline | ✅ |
| Roo Code | ✅ |
Check out our project roadmap for upcoming features, bug fixes, and progress.
stagewise is developed by tiq UG (haftungsbeschränkt) and offerend under the AGPLv3 license.
For more information on the license model, visit the FAQ about the GNU Licenses.
For use cases that fall outside the scope permitted by the AGPLv3 license, feel free to 📬 Contact Us.
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!
Got questions or want to license stagewise for commercial or enterprise use?
FAQs
> [!CAUTION] > This package is deprecated. > > There thus will be no further support or assistance with this version. > > Follow the guide in [the stagewise documentation](https://stagewise.io) to upgrade.
The npm package @stagewise/toolbar-react receives a total of 9,723 weekly downloads. As such, @stagewise/toolbar-react popularity was classified as popular.
We found that @stagewise/toolbar-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
Product
Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.