// 1. Import the toolbarimport{initToolbar}from'@stagewise/toolbar';// 2. Define your toolbar configurationconststagewiseConfig={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 initializesfunctionsetupStagewise(){// Only initialize once and only in development modeif(process.env.NODE_ENV==='development'){initToolbar(stagewiseConfig);}}// Call the setup function when appropriate for your frameworksetupStagewise();
⚡️ 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!
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.tsximport{StrictMode}from'react';import{createRoot}from'react-dom/client';importAppfrom'./App.tsx';import{StagewiseToolbar}from'@stagewise/toolbar-react';import'./index.css';// Render the main appcreateRoot(document.getElementById('root')!).render(<StrictMode><App/></StrictMode>,);// Initialize toolbar separatelyconsttoolbarConfig={plugins: [],// Add your custom plugins here};document.addEventListener('DOMContentLoaded',()=>{consttoolbarRoot=document.createElement('div');toolbarRoot.id='stagewise-toolbar-root';// Ensure a unique IDdocument.body.appendChild(toolbarRoot);createRoot(toolbarRoot).render(<StrictMode><StagewiseToolbarconfig={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).
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.
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):
<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 />"><!-- src/routes/+layout.svelte -->
<scriptlang="ts">
import { onMount } from'svelte';import { browser } from'$app/environment';import { initToolbar, typeToolbarConfig } from'@stagewise/toolbar'; // Adjust path if neededonMount(() => {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.
<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}"><!-- examples/svelte-kit-example/src/lib/components/stagewise/ToolbarLoader.svelte -->
<scriptlang="ts">
importtype { ToolbarConfig } from'@stagewise/toolbar';// ToolbarWrapper.svelte is a custom component that would call initToolbarimportToolbarWrapperfrom'./ToolbarWrapper.svelte'; import { browser } from'$app/environment';const stagewiseConfig:ToolbarConfig= { plugins: [// ... your svelte plugin config ],};
</script>
{#ifbrowser}
<ToolbarWrapperconfig={stagewiseConfig} />
{/if}
You would then use StagewiseToolbarLoader in your src/routes/+layout.svelte.
AgentSupported
Cursor
✅
Windsurf
✅
GitHub Copilot
🚧 In Progress
Cline
❌
BLACKBOXAI
❌
Console Ninja
❌
Continue.dev
❌
Amazon Q
❌
Cody
❌
Qodo
❌
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 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!
.png)
6 days ago
2
