Director.AI -- Build Walkthrough

What Was Built

A complete full-stack web application for faceless video creation with 35+ source files across backend and frontend.

Backend (18 files)

Express.js server with HTTP + WebSocket (Socket.IO) on port 5000
4 Mongoose models: User, Project, Video, Preset
JWT authentication with bcrypt password hashing
6 route modules: auth, projects, videos, presets, assets, admin
CLI Bridge Service: real child_process.spawn to Antigravity CLI with WebSocket streaming
Multer file upload (100MB limit, type filtering)
Winston logging, Helmet, rate limiting
Database seed script with admin and demo users

Frontend (16 files)

Vite + React 18 + TypeScript
Tailwind CSS with luxury dark theme (#1A1A1A, #D4AF37 gold, Playfair Display + Montserrat)
Framer Motion animations throughout
Redux Toolkit (auth, projects, videos slices)
Axios API client with JWT interceptors

Pages Built

Page	Description
Landing	Hero, How It Works, Features (8), Pricing (4 tiers), FAQ accordion, CTA, Footer
Login	Glass-panel form, Redux auth, error display
Register	Confirm password validation, terms link
Dashboard	Project grid, stats bar, create modal, AI Terminal toggle
ProjectPage	Breadcrumb, video list with status badges, inline terminal
VideoCreate	5-step wizard (Script/Voice/Music/Style/Assets), animated stepper
Preview	HTML5 player, status indicators, export checkboxes, linked terminal
Privacy	Static legal page
Terms	Static legal page

Core Novel Feature: Webapp as MCP Host Workspace

The core architecture has been inverted. Instead of the webapp calling the CLI, the webapp acts as an MCP-like Host Workspace (similar to VS Code) and the Antigravity CLI connects to it as a client agent.

The backend mcpServer.ts creates two WebSocket namespaces:

/mcp for the Google Antigravity CLI agent to connect and call tools (create_project, navigate, activity_log).
/browser for the human React frontend to listen to the agent.

The frontend uses useAgentOrchestrator.ts to listen to the agent. When the agent emits a navigate or create_project command to the backend, the backend relays it to the browser, and the human's screen automatically navigates or updates the UI to mirror what the agent is doing.

The AITerminal.tsx has been repurposed from a CLI input box into a read-only Agent Activity Log, showing the human exactly what the AI engine is thinking and doing in real-time.

A comprehensive INTEGRATION_GUIDE.md provides exact Socket.IO usage instructions for the Antigravity CLI to control this workspace.

How to Run

# 1. Configure environment
cp .env.example .env    # Edit with your MongoDB/Redis URLs

# 2. Install dependencies
cd server && npm install
cd ../client && npm install

# 3. Seed database (optional)
cd server && npm run seed

# 4. Run both servers
cd server && npm run dev   # :5000
cd client && npm run dev   # :5173

Open http://localhost:5173 to see the application.