Stagewise: Giving “Eyesight” to AI-Powered Code Editors Through Browser Toolbar Integration

Stagewise Demo Animation

The Problem: When AI Coding Meets UI Debugging Challenges

In the era of AI-assisted programming, developers face a universal pain point: modifying specific UI elements through natural language instructions often requires manual copying of component paths, describing interface locations, and constant switching between browsers and code editors. This context-breaking workflow severely limits the effectiveness of AI coding assistants.

Stagewise emerges as the solution – essentially giving AI code editors “visual perception.” Through its innovative browser toolbar design, developers can directly annotate requirements on web elements while AI agents receive complete contextual information, including DOM structures, screenshots, and component metadata, enabling true “what-you-see-is-what-you-fix” intelligent development.

Core Feature Analysis

Visual Annotation System

  • 🍂
    Element-Level Comments: Right-click any page element to add textual descriptions or requirements
  • 🍂
    Multi-Element Selection: Select multiple components to establish contextual relationships (e.g., form field groups)
  • 🍂
    Metadata Capture: Automatic collection of framework type, props/state information, and style rules

AI Context Enhancement

  • 🍂
    Real-Time DOM Streaming: Direct mapping of browser-rendered trees to editor environments
  • 🍂
    Smart Snapshots: Auto-generated annotated screenshots (partial/full page modes)
  • 🍂
    Plugin Extensions: Inject business-specific context via custom plugins (CMS configurations, A/B test rules)

Cross-Framework Support

  • 🍂
    Zero-Config Setup: Dedicated adapters for React, Vue, Svelte, etc.
  • 🍂
    Non-Invasive Design: Separate rendering root node prevents conflicts
  • 🍂
    Hot-Reload Ready: Toolbar configuration updates without app restart

Architectural Highlights

Bidirectional Communication Pipeline

Architecture Diagram
  1. Browser Side: WebSocket client via @stagewise/toolbar
  2. Editor Side: MCP (Message Control Protocol) server in VS Code extension
  3. Data Packaging: Messages contain structured DOM, serialized states, and visual snapshots

Security Isolation Mechanisms

  • 🍂
    Dev-Only Activation: Toolbar only loads when NODE_ENV=development
  • 🍂
    Sandboxed Communication: All messages require cryptographic signatures
  • 🍂
    Data Sanitization: Automatic filtering of sensitive fields (password inputs, PII)

5-Minute Setup Guide

Step 1: Install Editor Extension

  1. Get from VS Code Marketplace
  2. Auto-configure MCP server on first run
  3. Enable Cursor AI integration when prompted

Step 2: Inject Browser Toolbar

Auto-Configuration (Recommended)

# In Cursor: Open command palette
CMD/CTRL + Shift + P → Type "Setup Toolbar"

Manual Configuration (React Example)

// src/main.tsx
import { initToolbar } from '@stagewise/toolbar';

const config = {
  plugins: [{
    name: 'user-analytics',
    shortInfoForPrompt: () => `Current User ID: ${store.userId}`
  }]
};

if (import.meta.env.DEV) {
  initToolbar(config);
}

Step 3: Start Smart Debugging

  1. Open local dev environment in browser
  2. Right-click target element → Add requirements
  3. Observe AI-generated code suggestions

Framework Integration Handbook

React Configuration

// Create separate render root
import { StagewiseToolbar } from '@stagewise/toolbar-react';

createRoot(document.getElementById('toolbar-root')).render(
  <StagewiseToolbar config={{
    plugins: [/* Custom plugins */]
  }} />
);

Next.js Best Practices

// app/layout.tsx
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <StagewiseToolbar config={config} />
        {children}
      </body>
    </html>
  )
}

Vue/Nuxt Implementation

<!-- app.vue -->
<template>
  <ClientOnly>
    <StagewiseToolbar :config="vueConfig" />
  </ClientOnly>
</template>

Enterprise-Grade Extensions

Custom MCP Tool Development

  1. Create mcp-tools directory
  2. Implement tool class (Style Inspector Example):
// mcp-tools/style-inspector.ts
export class StyleInspector {
  @MCPCommand('inspectStyles')
  async getComputedStyles(selector: string) {
    return Array.from(document.querySelectorAll(selector))
      .map(el => getComputedStyle(el));
  }
}
  1. Register in toolbar config:
{
  "plugins": [{
    "mcp": {"port": 3001, "tools": [StyleInspector]}
  }]
}

Ecosystem Support Matrix

AI Agent Support Status Features
Cursor ✅ Full Native MCP Integration
GitHub Copilot 🚧 Beta Basic Annotation Parsing
Amazon Q ❌ Not Supported –

Security & Licensing Model

Open Source Licensing

  • 🍂
    Core Engine: AGPLv3 (Includes toolbar SDK & base plugins)
  • 🍂
    Enterprise Extensions: Commercial License (SSO, Audit Logs, Private Protocols)

Security Boundaries

  1. Environment Lock: Only activates when process.env.NODE_ENV === 'development'
  2. Encrypted Comms: TLS 1.3 + Message-Level Signatures
  3. Permission Tiers:

    • 🍂
      Level 1: Read-Only (Element Selection, Metadata)
    • 🍂
      Level 2: Write Operations (Require User Confirmation)
    • 🍂
      Level 3: System Access (Local Debug Only)

Troubleshooting Guide

Toolbar Not Visible

  1. Confirm NODE_ENV is set to development
  2. Check browser console for init errors
  3. Verify MCP server status in VS Code extension

AI Agent Unresponsive

# Diagnostic Steps
1. Run `stagewise:diagnose` in Cursor
2. Check WebSocket status in Network panel
3. Verify firewall isn't blocking MCP port

Custom Plugin Failure

  • 🍂
    Ensure plugin object matches interface:
interface StagewisePlugin {
  name: string;
  description: string;
  shortInfoForPrompt: () => string;
  mcp?: MCPConfig;
  actions?: PluginAction[];
}

Project Roadmap

Near-Term Focus

  • 🍂
    Enhanced TypeScript Type Inference
  • 🍂
    Native Web Components Support
  • 🍂
    Figma Plugin Bi-Directional Sync

Long-Term Vision

  • 🍂
    Establish Visual AI Programming Standards
  • 🍂
    Cross-Editor Compatibility Layer
  • 🍂
    Deep Browser DevTools Integration

Community Participation

Developer Collaboration

  1. Follow Contribution Guidelines
  2. Start with good first issue labels
  3. Join Discord Discussions: Invite Link

Enterprise Partnerships

  • 🍂
    Custom Development: sales@stagewise.io
  • 🍂
    On-Premise Solutions
  • 🍂
    Training Programs