PromptStudio

A unified environment for prompt engineering that merges a structured IDE with a visual canvas for weighted context composition, local retrieval, and live model streaming.

Overview

PromptStudio solves a fundamental problem in prompt engineering: the fragmentation between text-based prompt authoring tools and visual context composition interfaces. Engineers and builders often juggle between IDEs for writing prompts and experimental canvases for organizing context, leading to duplication, version drift, and poor reproducibility.

PromptStudio unifies these workflows into a single, cohesive environment where you can think visually on a canvas of weighted chips or think textually in an advanced editor—all while maintaining perfect synchronization between views. Every change is reflected instantly in the compiled effective prompt, token budgets, and diagnostics.

The Problem We're Solving

For Prompt Engineers:

Prompt drift across different tools makes it hard to maintain consistency
Unclear token costs lead to unexpected truncation or budget overruns
Non-repeatable runs make A/B testing unreliable
Version control is fragmented across multiple files and formats

For AI Engineers:

Black-box retrieval systems provide no visibility into chunk selection
Invisible truncation happens without warning
Lack of seeds and logs makes debugging nearly impossible
No way to inspect why certain context was included or excluded

For Researchers & Writers:

Text-only tools feel brittle and hard to reason about
Hard to trust outputs when source grounding is hidden
Importing and organizing documents is cumbersome
No visual way to see how context weights affect outputs

Our Solution

PromptStudio addresses these challenges through:

Dual Views in Perfect Sync: Work in visual canvas mode or text editor mode—they stay synchronized without drift
Inspectable Everything: See exactly why chunks were selected or dropped, with similarity scores, weights, and budget impacts
Deterministic by Default: Seed pinning and comprehensive run logs ensure reproducible experiments
Local-First Architecture: Your data, embeddings, and even model inference stay on your device by default
Weighted Context Composition: Control prompt behavior through intuitive visual controls (weights, pins, policies) with real-time feedback

Key Features

Dual Views: Switch seamlessly between a visual canvas and a text editor—both stay synchronized
Local-First: Run inference, embeddings, and storage on your device by default. Your data stays private
Document Grounding: Upload PDFs, markdown files, and documents for context-aware prompt engineering
Weighted Context: Control which parts of your prompt get priority with adjustable weights and pins
Token Management: Real-time token counting and budgeting to keep prompts within model limits
Reproducible Runs: Deterministic execution with seed pinning and comprehensive run logs
Template Library: Start quickly with pre-built templates for common use cases

Design Philosophy

PromptStudio is built on core principles that guide every interaction:

Local-First & Privacy-Focused

All processing happens on your device by default. Your documents are embedded locally, prompts are stored locally, and model inference runs in your browser when possible. This means your sensitive data never leaves your machine unless you explicitly opt into remote APIs.

Visual + Textual Parity

The canvas and editor are equal citizens. Neither is a "second-class" view. Switch between them seamlessly knowing that your work is always synchronized. Edit visually when you want spatial reasoning, or edit textually when you prefer precise control—the compiled prompt stays identical.

Deterministic & Inspectable

Every decision is visible and reproducible. See exactly which chunks were selected and why (similarity score, weight multiplier, budget impact). Every run logs the full state—compiled prompt, parameters, seed, and selected chunks—so you can reproduce identical results or understand differences.

Performance-Aware

Real-time token counting and lane budgeting keep you informed about resource usage. Set global token caps and lane budgets, and the compiler respects them while showing you what got included, what got dropped, and why. No surprises.

Accessible & Learnable

Built for both beginners and experts. Templates and guided flows help newcomers get started quickly, while keyboard shortcuts, command palette, and advanced features satisfy power users. Full keyboard navigation and ARIA labels ensure accessibility.

Unique Interaction Design

The Canvas: Visual Prompt Composition

Lanes for Structure Prompts are organized into semantic lanes (System, Instruction, Context, Examples, History) that map to how models interpret prompts. Each lane has an adjustable budget percentage, giving you control over how tokens are allocated.

Chips with Personality Each context element is a "chip" with:

Type indicators: Persona, Note, Document, Rule, Tool hint, Example pairs
Weight slider (0.0 - 3.0): Control influence on the final prompt
Pin toggle: Guaranteed inclusion even under strict budgets
Policy selection: Full content, summary-first, or truncate
Visual color coding: Quick recognition of chip types

Drag & Drop with Instant Feedback Drag chips between lanes and see the compiled prompt update in under 200ms. Spring physics and snap targets make the interaction feel natural. Hover tooltips show token estimates and top concepts before you commit.

Weight-Based Selection Unpinned chips are scored and packed intelligently:

Score = lane multiplier × base weight + retrieval similarity (for documents)
Higher weighted chips get priority when budgets are tight
Visual indicators show which chips will be included vs. dropped

Drop Reason Inspector

When context gets excluded, you'll know exactly why:

"Budget exceeded" — Lane or global token limit reached
"Low similarity score" — Retrieved chunk didn't match query well enough
"Policy truncation" — Summary-first policy activated
"Weight too low" — Other chips scored higher

This transparency eliminates the "black box" feeling of traditional prompt tools.

Live Compilation & Preview

As you edit (either in canvas or editor), the effective prompt updates in real-time with:

Color-coded ribbons: See which chips contributed to each section
Per-lane token meters: Know how close you are to budget limits
Total token count: Track against your global cap
Reserved generation tokens: Always leave room for model output

Keyboard-Driven Workflow

Designed for speed:

Cmd/Ctrl + K opens a command palette for quick navigation
Number keys (1-5) instantly switch between lanes
P toggles pin status
W/S nudges weight incrementally
Arrow keys provide precise control without leaving keyboard

Workflow Benefits

For Prompt Engineers

Iterate Faster

Switch between visual and text views without losing context
A/B test different weight configurations with identical seeds
Version history tracks every change automatically
Export/import bundles share prompts across team members

Maintain Consistency

Pin critical elements (personas, rules) so they never get dropped
Set lane budgets once and trust the compiler to respect them
Use templates to establish patterns across projects

Debug with Confidence

See exactly why a run differed from expectations
Compare compiled prompts side-by-side
Inspect retrieval hits to understand grounding quality

For AI Engineers

Inspectable RAG

View similarity scores for every retrieved chunk
See MMR (Maximal Marginal Relevance) penalties applied
Understand token costs per chunk
Preview which documents contribute most to each run

Reproducible Experiments

Pin seeds for deterministic results
Export run logs with full parameter snapshots
Compare runs with diff views
Track metrics (latency, throughput, token efficiency) over time

Model Portability

Hot-swap between local and remote models
Preserve exact compiled prompts across different backends
Test the same prompt with multiple model providers

For Researchers & Writers

Visual Composition

See your prompt as a spatial arrangement, not just text
Understand relationships between context elements at a glance
Drag documents onto canvas and see them ground your prompt

Trust Through Transparency

Know which parts of your documents influenced the output
See citation-like references to source chunks
Preview retrieved context before running

Easy Document Management

Drag-and-drop PDFs, markdown files, and notes
Automatic chunking and embedding happens in the background
Search your document library with semantic queries

Getting Started

Prerequisites

Node.js (v18 or higher recommended)
A modern browser with WebGPU support (Chrome, Edge, or Safari)
For remote models: API keys for OpenAI, Anthropic, or Gemini (optional)

Installation

Clone the repository:

git clone <repository-url>
cd prompt-studio

Install dependencies:
```
npm install
```

Set up environment variables (optional, for remote models):

# Create a .env.local file
GEMINI_API_KEY=your_api_key_here

Start the development server:
```
npm run dev
```
Open your browser and navigate to the URL shown in the terminal (typically http://localhost:5173)

Usage

Creating Your First Prompt

Start from Dashboard: Click "New Prompt" to begin
Choose a Template: Browse the template library for common patterns like support triage, code review, or research questions
Compose Your Prompt:
- Use the Editor for text-based editing with syntax highlighting
- Or use the Canvas to visually arrange chips in lanes (System, Instruction, Context, Examples)

Working with Documents

Click "Context Manager" in the sidebar
Upload PDF, Markdown, or text files
Documents are automatically chunked and embedded locally
Drag document chips to your canvas to ground your prompts with retrieved context

Running Prompts

Set your model preferences in Settings
Configure generation parameters (temperature, max tokens, seed)
Click "Run" (or press Cmd/Ctrl + Enter)
View streaming results in the console with real-time metrics

Managing Your Library

Version History: Every edit creates a new version automatically
Export & Import: Share your prompts and canvases as JSON bundles
Search & Organize: Use tags, folders, and search to find what you need

Example Workflows

Creating a Document-Grounded Q&A System:

Upload FAQ documents via Context Manager
Create a new canvas or use the "Support Triage" template
Add a persona chip in the System lane and pin it
Drag document chips to the Context lane
Set Context lane budget to 60% to prioritize grounding
Adjust document chip weights based on importance
Run and inspect which chunks were selected in the diagnostics panel

A/B Testing Prompt Variations:

Create your base prompt with pinned elements
Duplicate the canvas (Cmd/Ctrl + D or via Library)
Adjust weights or lane budgets in the duplicate
Run both with the same seed
Use the Compare view to see side-by-side differences
Score results with a rubric and save to experiment records

Building a Reusable Prompt Template:

Design your prompt structure with lanes and chip types
Use variables for dynamic content ({{variableName}})
Set recommended weights and budgets
Save as a template in the Library
Share the template JSON bundle with your team

Project Structure

prompt-studio/
├── components/          # React components
│   ├── Canvas.tsx      # Visual canvas for prompt composition
│   ├── Editor.tsx      # Text-based prompt editor
│   ├── Dashboard.tsx   # Main dashboard view
│   └── ...
├── utils/              # Core utilities
│   ├── PromptCompiler.ts   # Prompt packing and compilation
│   ├── vectorStore.ts      # Local vector database
│   ├── fileIngestion.ts    # Document processing
│   └── TokenCounter.ts     # Token counting utilities
├── workers/            # Web Workers
│   └── embedWorker.ts  # Embedding generation in background
└── types.ts            # TypeScript type definitions

Keyboard Shortcuts

Cmd/Ctrl + K: Open command palette
Cmd/Ctrl + N: New prompt or canvas
Cmd/Ctrl + S: Save current work
Cmd/Ctrl + Enter: Run the current prompt
Cmd/Ctrl + D: Duplicate selected chip
1-5: Set active lane
P: Pin/unpin selected chip
W/S: Nudge chip weight up/down

Technical Details

Architecture

Frontend: React + TypeScript with Vite
Storage: IndexedDB for local data persistence
Embeddings: Local embedding models via transformers.js
Models: Support for local models (WebGPU) and remote APIs (OpenAI, Anthropic, Gemini)

Supported File Formats

PDF
Markdown (.md)
Plain text (.txt)
HTML

Model Support

Local: Small models via transformers.js with WebGPU acceleration
Remote: OpenAI, Anthropic Claude, Google Gemini

Development

Build for Production

npm run build

Preview Production Build

npm run preview

Privacy & Security

Local-First: All data stays on your device by default
No Telemetry: No data is sent to external servers unless you explicitly use remote model APIs
Secure Key Storage: API keys are stored locally in your browser
Explicit Exports: Only export data when you explicitly choose to

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License

Support

For issues, questions, or feature requests, please open an issue on GitHub.

Built with ❤️ by OpusLABS

Name		Name	Last commit message	Last commit date
components		components
utils		utils
workers		workers
.gitignore		.gitignore
App.tsx		App.tsx
README.md		README.md
index.html		index.html
index.tsx		index.tsx
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
types.ts		types.ts
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation