Video Scripts

This document describes the current Video Studio implementation in apps/frontend.

Status

• Route: /video-studio
• Route wrapper: apps/frontend/src/routes/video-studio/VideoStudioRoute.tsx
• Feature page: apps/frontend/src/features/video-studio/components/VideoStudioPage.tsx
• Storybook: apps/frontend/src/features/video-studio/components/VideoStudioPage.stories.tsx
• Tests: apps/frontend/src/features/video-studio/components/VideoStudioPage.test.tsx

UX Model

Video Studio is a queue + editor workflow:

• Left: script queue with search and status filters
• Right: concept/script editor
• Header actions: refresh, create concept

Core actions:

• create concept
• edit metadata and script body
• generate script with AI
• save/update
• delete

Data Model (Frontend)

VideoScriptItem tracks:

• title, description
• platform (youtube | tiktok | instagram | linkedin)
• script type (long_form | short_form)
• duration, tags
• target audience, key takeaway
• generated script text
• status (concept | draft | ready | published)
• optional campaign id

API Usage

Standard CRUD:

• GET /api/video-scripts
• POST /api/video-scripts
• PUT /api/video-scripts/:id
• DELETE /api/video-scripts/:id

AI generation:

• GET /api/brand-profile (brand context)
• POST /api/ai/generate-video-script

Offline/Local Mode

If auth_token is absent:

• local seed concepts are used
• AI generation uses a deterministic local template draft
• saves remain local to the page state

Guardrails

• Keep /video-studio as the canonical doc route (do not document /video-scripts as primary UI path).
• Keep generation payload mapping aligned with VideoStudioPage.tsx (idea, profile, optional campaignId).
• Any new status or platform option must update:
  • STATUS_OPTIONS / PLATFORM_OPTIONS in code
  • this doc
  • client-facing guide.