Ever spent 20 minutes explaining your frontend structure to ChatGPT/Claude/Cursor, only to have it misunderstand what you’re trying to build? Yeah, me too. Here’s a tool that fixes this annoying problem.
The Problem We All Face
Picture this: You want to modify your component. Your typical AI conversation goes like this:
You: "Can you help me style my navbar?"
AI: "Sure! Can you share your navbar code?"
You: *pastes 50 lines of JSX*
AI: "What about the CSS?"
You: *pastes another 100 lines*
AI: "Where is this component used?"
You: *explains folder structure*
AI: "Can you describe what it currently looks like?"
You: *tries to describe UI in words*
AI: *generates code*
You: "That's not what I wanted at all..."
20 minutes later, even after sharing everything, the AI still doesn’t understand your vision and delivers something completely different from what you had in mind.
Enter Stagewise: Visual Context for AI
Stagewise is a browser toolbar that lets your AI agents actually see your frontend. No more explaining folder structures or describing UI elements with words.
How it works:
- 🎯 Point & Click: Select any element on your webpage
- 💬 Add Context: Write what you want to change
- 🤖 AI Magic: Your code editor receives both visual and text context
- ✅ Done: Changes happen automatically
Quick Setup (< 5 minutes)
Currently supports Windsurf and Cursor (more editors coming soon).
Step 1: Install Extension
From VS Code Marketplace, install the Stagewise extension.
Step 2: Setup Toolbar
Option A – Auto Setup (Recommended):
- Press
Ctrl+Shift+P(Command Palette) - Type
setupToolbar - Hit Enter
- Cursor automatically injects the necessary code
Option B – Manual Setup:
Check their docs for framework-specific examples (React, Next.js, Vue, Nuxt).
Step 3: Run Your App
npm run dev
You’ll see a floating toolbar in the bottom-right corner.
Demo: Redesigning a Navbar in 30 Seconds
Instead of the usual back-and-forth with AI, here’s what actually happened:
- Selected the navbar element on my webpage
- Typed: „Change this navbar design“
- Sent to Cursor via Stagewise
- Cursor received complete element data: classes, styles , DOM structure, and exact text content – no more blind guessing!
- Changes applied automatically
✅ What works great:
- Saves tons of time on context explanation
- AI understands exactly what you’re pointing at
- No complex setup required
Framework Support
Works with all major frameworks:
-
React:
@stagewise/toolbar-react -
Next.js:
@stagewise/toolbar-next -
Vue:
@stagewise/toolbar-vue -
Nuxt:
@stagewise/toolbar-vue
Check their examples repo for implementation details.
Links:
– Examples
What’s your biggest pain point when working with AI on frontend projects? Drop it in the comments — maybe there’s a tool for that too! 👇