← Back to prompts

Prompt · December 18, 2025

Video Studio

A prompt to create your own video studio.

AI Agent Prompt: Build a Video Review & Feedback Studio

Role: Senior Full Stack Developer Objective: Build a "Video Studio" application that allows users to upload videos, manage versions, and gather frame-accurate feedback (similar to Frame.io). Tech Stack: Next.js (App Router), Supabase (Auth, Postgres, RLS), Google Drive API (Video Storage).

1. Core Features

A. Dashboard (Project Management)

  • Projects: Users create "Projects" to organize their videos.
  • Thumbnails: Display a grid of projects with the latest version's thumbnail.
  • Status: Show status tags (e.g., "In Review", "Approved", "Changes Requested").
  • Upload: Drag-and-drop upload that creates a new project or adds a version to an existing one.
  • Migration: A utility to scan Google Drive for "orphan" videos and create projects for them.

B. Video Detail Page (The Player)

  • Version Control: A dropdown to switch between versions (v1, v2, v3) of the video.
  • Video Player:
  • Custom controls or standard HTML5 player.
  • Dynamic Aspect Ratio: Support vertical (9:16), square (1:1), and widescreen (16:9) videos without cropping.
  • Streaming: Stream video content securely from Google Drive (bypass 403s/CORS).
  • Comment System:
  • Frame-Accurate: Comments are linked to a specific timestamp in the video.
  • Timeline Markers: Show dots on the video timeline where comments exist.
  • Sidebar: Display a threaded conversation (comments & replies) on the right.
  • Resolution: Mark comments as "Resolved" to hide them (with a toggle to show).
  • Click-to-Jump: Clicking a comment jumps the video to that timestamp.

C. Sharing & Permissions

  • Share Modal: Invite other users by email to view/comment on a specific video.
  • RLS Policies: Ensure only owners and shared users can access the content.

2. Technical Implementation Details

A. Database Schema (Supabase)

-- Projects Table
create table video_projects (
    id uuid default gen_random_uuid() primary key,
    name text not null,
    owner_id uuid references auth.users(id),
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

-- Video Metadata (Versions)
create table video_metadata (
    video_id text primary key, -- Google Drive File ID
    project_id uuid references video_projects(id),
    version int default 1,
    name text,
    thumbnail_link text,
    status text default 'In Review',
    updated_at timestamptz default now()
);

-- Comments
create table video_comments (
    id uuid default gen_random_uuid() primary key,
    video_id text references video_metadata(video_id),
    user_id uuid references auth.users(id),
    content text not null,
    timestamp float not null, -- Seconds
    parent_id uuid references video_comments(id), -- For replies
    is_resolved boolean default false,
    user_name text default 'Anonymous',
    created_at timestamptz default now()
);

-- Sharing
create table video_shares (
    id uuid default gen_random_uuid() primary key,
    video_id text references video_metadata(video_id),
    user_email text not null,
    created_at timestamptz default now()
);

B. Google Drive Integration

  • Service Account: Use a Google Service Account for server-side operations.
  • Resumable Uploads: Implement a "Proxy Upload" pattern to bypass Vercel's 4.5MB body limit.
  1. Frontend requests an upload URL from the backend.
  2. Backend gets a Resumable Upload URL from Google Drive API.
  3. Frontend slices the file into 4MB chunks and sends them to a Next.js API Route (/api/proxy-upload).
  4. The API Route forwards chunks to Google Drive.
  • Streaming: Create a route (/api/video-stream?videoId=...) that fetches the video stream from Drive and pipes it to the response with correct Content-Range headers. Optimization: Reuse the Google Auth client instance to prevent latency/stuttering.

C. Frontend Components

  • VideoPlayer.tsx: Handles the video element, timeline markers, and emits time updates.
  • CommentSidebar.tsx: Manages the list of comments, reply forms, and resolution status. Fixed width (w-96) to prevent layout breakage.
  • ShareModal.tsx: Simple form to add emails to the video_shares table.

3. Step-by-Step Instructions for the AI

  1. Setup: Initialize Supabase client and Google Drive service account utils.
  2. Database: Run the SQL migrations provided above.
  3. Backend:
  • Create actions/video-studio.ts for server actions (create project, add comment, share).
  • Create api/proxy-upload/route.ts for chunked uploads.
  • Create api/video-stream/route.ts for streaming.
  1. Frontend:
  • Build the Dashboard (/studio/video/page.tsx) with project grid and upload manager.
  • Build the Detail Page (/studio/video/[id]/page.tsx) with the player and sidebar.
  1. Refinement: Ensure vertical videos render correctly (no cropping) and comments sync perfectly with the timeline.

Copy this prompt as markdown