Prompt Canvas UI
A Visual Studio Code extension that provides a visual interface for prompt engineering with drag-and-drop cards and interactive parameter controls.
Features
- Visual Prompt Flow: Represent prompts as cards in a visual flow (system → user → assistant)
- Drag & Drop Interface: Easily rearrange prompt blocks by dragging and dropping
- Parameter Controls: Adjust temperature and max tokens with intuitive sliders
- Instant Preview: See outputs immediately as you build your prompt pipeline
- Save & Load: Save your prompt canvases for reuse
Usage
Open the Extension:
- Open the Command Palette (
Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows/Linux)
- Run "Open Prompt Canvas" command
- Or click the Prompt Canvas icon in the Activity Bar
Build Your Prompt Flow:
- Click + System to add system instructions (green card)
- Click + User to add user prompts (blue card)
- Click + Assistant to add assistant responses (red card)
Customize Parameters:
- Adjust Temperature slider (0-2) to control response randomness
- Set Max Tokens slider (1-4000) to limit response length
Edit and Execute:
- Click in any text area to edit prompt content
- Drag cards to reorder your prompt sequence
- Click ▶ Execute to run your prompt flow
- Use 💾 Save to preserve your canvas or 🗑 Clear to start over
Installation
- Clone this repository
- Run
npm install to install dependencies
- Run
npm run compile to build the extension
- Press
F5 to launch a new VS Code window with the extension loaded
Development
npm run compile: Compile TypeScript to JavaScriptnpm run watch: Watch for changes and recompile automatically
Architecture
The extension consists of:
extension.ts: Main extension entry pointpromptCanvasProvider.ts: Webview provider for the canvas interface- HTML/CSS/JS: Interactive canvas UI with drag-and-drop functionality
Future Enhancements
- Integration with OpenAI API
- Template library
- Export to various formats
- Collaborative editing
- Advanced parameter controls
- Prompt versioning
| |
