Veo Generative Video Orchestrator

A browser-native, "Google Flow" inspired workspace for creating cinematic product explainers using Google Veo. No server required - runs entirely in your browser.

Features

• Project Management - Create and manage multiple video generation flows
• Asset Tray - Upload character and product reference images for consistency
• Storyboard - Sequential scene generation with frame-to-frame continuity
• Video Stitching - Concatenate scenes into final videos (in-browser via ffmpeg.wasm)
• Image Generation - Generate reference images with Gemini
• Veo Integration - Powered by Google's veo-3.1-generate-preview

Tech Stack

• Framework: React 18 + TypeScript + Vite
• Styling: Tailwind CSS v4
• Storage: IndexedDB (browser-native database)
• Video Processing: ffmpeg.wasm (WebAssembly)
• AI SDK: @google/genai (direct browser calls)
• Icons: Lucide React

Prerequisites

• Google AI API Key - Get yours at https://ai.google.dev/
• Modern Browser - Chrome/Edge 90+, Firefox 90+, or Safari 15+

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

Then open http://localhost:5173 in your browser.

Setup

1. Get API Key

   • Visit Google AI Studio
   • Create or select a project
   • Generate an API key

2. Configure the App

   • Open the app in your browser
   • Go to Settings (gear icon in sidebar)
   • Enter your API key in the "Google API Key" section
   • Click Save Key
   • Click Test to verify

3. Create Your First Project

   • Click + next to "Active Flows" in the sidebar
   • Enter a project name
   • Start adding scenes!

Architecture

┌─────────────────────────────────────────────────────────────┐
│                        BROWSER                              │
├─────────────────────────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐  ┌─────────────────┐  │
│  │   React UI   │  │  IndexedDB   │  │  @google/genai  │  │
│  │              │  │  (Data)      │  │  (AI Calls)     │  │
│  └──────────────┘  └──────────────┘  └─────────────────┘  │
│         │                 │                    │           │
│         └─────────────────┴────────────────────┘           │
│                           │                                 │
│                    ┌──────────────┐                        │
│                    │ ffmpeg.wasm  │                        │
│                    │ (Video Edit) │                        │
│                    └──────────────┘                        │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
                    ┌─────────────────┐
                    │  Google AI API  │
                    │ (Veo & Gemini)  │
                    └─────────────────┘

Data Storage

All data is stored locally in your browser:

Storage	Purpose	Data
IndexedDB	Projects, Scenes, Assets	Videos, Images, Metadata
localStorage	Settings	API Key, Model Config

Note: Videos are stored as blobs in IndexedDB. Large projects may approach browser storage limits (~50-100MB depending on browser).

Privacy & Security

• Your API key is stored only in your browser's localStorage
• Your videos and images never leave your device except when sent to Google's API for generation
• No backend server - everything runs client-side
• No tracking or analytics - completely private

Development

# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Browser Compatibility

Feature	Chrome/Edge	Firefox	Safari
IndexedDB	✅ 90+	✅ 90+	✅ 15+
WebAssembly	✅ 90+	✅ 90+	✅ 15+
File System Access	✅ 86+	⚠️ Partial	⚠️ Partial

Roadmap

• Browser-only architecture
• IndexedDB data storage
• Google GenAI direct integration
• ffmpeg.wasm video stitching
• API key management in settings
• Audio generation and overlay
• Caption/subtitle support
• Export to different formats
• Offline mode improvements

Contributing

See CONTRIBUTING.md for guidelines.

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgments

• Google GenAI SDK
• ffmpeg.wasm
• idb - IndexedDB wrapper
• Tailwind CSS
• Lucide Icons

Troubleshooting

"API key not configured"

Go to Settings and add your Google API key.

"IndexedDB not available"

Ensure you're not in private/incognito mode. Some browsers disable IndexedDB in private mode.

Video generation fails

Check browser console for errors. Common issues:

• API quota exceeded
• API key not valid
• Network issues

ffmpeg.wasm fails to load

Ensure you have a stable internet connection for the initial WASM download (~25MB).

---

Made with ❤️ for the open-source community