Vide

The WebMCP-Native Video IDE: Programmatic, text-based motion graphics with multimodal AI agent collaboration.

---

Overview and Problem Statement

Traditional timeline video editors (Premiere, After Effects, DaVinci) are heavy, manual, and inaccessible to autonomous AI agents. Existing programmatic video libraries either require complex Node.js/FFmpeg server infrastructure or lack an interactive visual feedback loop.

Vide reimagines video creation as deterministic code execution inside the browser, built for human-agent co-creation through the Model Context Protocol (WebMCP).

Define your scenes, text, assets, LaTeX math formulas, and physics-based animations using a clean Domain-Specific Language (DSL), and watch your video compile and render in real time. Autonomous AI agents can directly inspect the timeline, capture rendered frame screenshots, edit scripts, manage local media assets, and trigger hardware-accelerated MP4 exports.

---

WebMCP Integration (W3C Model Context Protocol)

Vide implements the W3C WebMCP standard interface via document.modelContext, turning the browser video editor into an autonomous workspace for AI agents, browser extensions, and LLM clients.

 +--------------------------------------------------------+
 |           AI Agent / Multimodal LLM Client             |
 +--------------------------+-----------------------------+
                            | W3C WebMCP Standard
 +--------------------------v-----------------------------+
 |                      Vide Studio                       |
 |  +--------------------------------------------------+  |
 |  |              document.modelContext               |  |
 |  +-------+------------+-------------+------------+--+  |
 |          |            |             |            |     |
 |  +-------v-----+ +----v------+ +----v-----+ +----v--+  |
 |  | Multimodal  | | DSL Script| | Timeline | | Render|  |
 |  | Inspection  | | & AST API | | & Assets | | Engine|  |
 |  +-------------+ +-----------+ +----------+ +-------+  |
 +--------------------------------------------------------+

Key WebMCP Capabilities

1. Multimodal Visual Feedback Loop (capture_frame_screenshot): Agents render arbitrary timestamps to base64 PNG snapshots to visually critique scene composition, font legibility, contrast, and animations.
2. Deterministic Script Management (set_active_script_code, validate_script): Agents create, validate, and hot-reload Vide DSL scripts in a secure AST sandbox with automated syntax diagnostics.
3. Semantic Asset Indexing and Metadata (search_assets, set_asset_notes): Agents query local project folders, inspect audio BPM tempo, read transcripts, and attach semantic metadata to media assets.
4. Timeline Navigation and Breakpoints (list_timeline_cues, seek_to_cue, add_timeline_cue): Interactive marker pins, breakpoints, and playback ranges enable agents to navigate and debug complex animations step-by-step.
5. Client-Side Video Export (export_video): Agents trigger 60 FPS hardware-accelerated MP4 renders using browser-native WebCodecs, saving the finished video straight to the user's project folder.

---

WebMCP Tool Reference

Vide exposes 20+ tools over document.modelContext across 7 specialized domains:

Domain	Tools	Description
Visual Inspection	capture_frame_screenshot, analyze_timeline, inspect_layers_at_time	Multimodal frame capture and temporal layer density inspection.
Script and AST	get_active_script, set_active_script_code, create_script, list_open_scripts, switch_active_script, save_active_script	Read, create, update, and switch active timeline script files.
Engine and Playback	validate_script, get_scene_settings, control_playback	Dry-run AST validation and playback transport controls.
Asset Management	get_asset_metadata, set_asset_notes, search_assets	Semantic asset querying, audio BPM inspection, and metadata tagging.
File System	list_project_files, read_project_file, write_project_file, delete_project_file	Local project file operations via the File System Access API.
Timeline Cues	list_timeline_cues, seek_to_cue, add_timeline_cue	Breakpoints, chapter markers, and playhead positioning.
Video Export	export_video	Serverless WebCodecs hardware encoding (AVC/H.264, AV1, VP9).
Documentation	search_vide_docs, get_dsl_reference	Instant contextual access to the Vide DSL syntax and primitives.

---

Core Features

• Custom Motion DSL: Human-readable JavaScript subset evaluated into an immutable AST graph without unsafe evaluation.
• Live Hot-Reloading: Instant visual canvas feedback as you or your AI agent edits code.
• Local-First Architecture: Powered by the File System Access API. Reference high-resolution video, audio, and images directly from your disk without cloud uploads.
• KaTeX LaTeX Math Rendering: First-class support for animated mathematical formulas, complex fractions, and scientific notation.
• Serverless WebCodecs Encoding: Export MP4/WebM videos at 60 FPS directly on your machine using hardware acceleration via Mediabunny.
• Audio Scrubbing and Visualizer: Real-time Web Audio API spectrum analysis, pitch-preserved variable speed playback, and reverse audio decoding.
• Interactive HUD and Solar Theme: Cyberpunk HUD interface with WCAG-compliant contrast and astronomical solar-scheduled theme switching.

---

The Vide DSL Mental Model

Every video in Vide is composed in four simple stages:

// 1. ASSETS & PRIMITIVES: Declare your visual and audio elements
const bg = src("./assets/cyber-grid.mp4", { in: 0, out: 8 });
const formula = math("e^{i\\theta} = \\cos\\theta + i\\sin\\theta", {
  x: 960,
  y: 540,
  fontSize: 54,
  fill: "#00f0ff",
  duration: 6
});

// 2. ANIMATION: Attach tweens and easing curves
animate(formula, "y", { from: 600, to: 540, duration: 1.2, ease: "easeOutCubic" });
fade(formula, { in: 0.8, out: 0.8 });

// 3. COMPOSITION: Layer simultaneously (parallel) or in series (sequence)
const main = parallel([
  at(0, bg),
  at(1.0, formula)
]);

// 4. OUTPUT: Designate composition root, resolution, and frame rates
output(main, {
  width: 1920,
  height: 1080,
  previewFps: 30, // Responsive live editing
  exportFps: 60,  // Full 60 FPS hardware export
  backgroundColor: "#02050b"
});

---

Architecture and Tech Stack

• Framework and Routing: TanStack Start and TanStack Router with React 19
• Code Editor: Monaco Editor with custom Monarch syntax highlighter and gutter breakpoint markers
• AST Compiler: Acorn AST parser with deterministic runtime sandbox
• Video Encoding: Mediabunny (WebCodecs API and MP4 Muxer)
• Math Typesetting: KaTeX 2D canvas rendering
• State Management: Zustand with multi-slice architecture
• Schema Validation: Valibot
• Icons: Phosphor Icons
• Styling: Tailwind CSS v4

---

Getting Started (Local Development)

Prerequisites

• Node.js >= 20.0.0
• Chromium-based browser (Chrome, Edge, Brave) for File System Access API and WebCodecs support.

Installation

1. Clone the repository:

   git clone https://github.com/zerdalu/vide-editor.git
   cd vide-editor

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser at http://localhost:3000.

---

Connecting an AI Agent via WebMCP

To connect an AI agent to Vide Studio:

1. Open Vide in a WebMCP-compatible browser or with a WebMCP agent harness.
2. The agent automatically discovers all tools exposed on document.modelContext.
3. The agent can validate scripts, capture screenshots with capture_frame_screenshot, and collaboratively build motion graphics alongside the user.

---

License

See LICENSE for details.