Vibe Video Generator

AI-powered video generation using Claude and Remotion, running on Cloudflare Workers with the Cloudflare Sandbox SDK.

Features

• AI-Driven Video Creation - Describe your video in natural language, powered by Claude
• Live Preview - Real-time preview powered by Remotion development server
• Asset Support - Upload images, videos, and audio files for use in your compositions
• Video Export - Render and download in MP4

Architecture

• Cloudflare Workers - Serverless compute platform
• Cloudflare Sandbox SDK - Isolated container environments using CLoudflare Containers
• Hono - Lightweight web framework
• Remotion - React-based video generation framework
• Claude AI - Code generation via Cloudflare AI Gateway

Prerequisites

• Node.js 18+
• Cloudflare account with Workers Paid plan
• Docker installed

Setup

1. Clone the repository:

   git clone https://github.com/harshil1712/vibe-video-generator.git
   cd vibe-video-generator

2. Install dependencies:

   npm install

3. Authenticate with Cloudflare:

   npx wrangler login

4. Create a new AI Gateway

   1. Go to AI Gateway dashboard
   2. Enter fun-demo in the Gateway ID field.
   3. Click on Create

Development

1. Start Docker desktop
2. Start the local development server with hot reload:

npm run dev

This runs wrangler dev which provides a local environment for testing your Worker.

Deployment

Deploy to Cloudflare:

npm run deploy

Configuration

Type generation for Cloudflare bindings:

npm run cf-typegen

This command should be run after modifying wrangler.jsonc (bindings, environment variables, or Durable Object configuration).

API Endpoints

POST /vibe/video/stream

Generate a video using AI with real-time streaming responses.

Request:

• Content-Type: multipart/form-data
• text (required): Natural language description of the video to generate
• assets (optional): File uploads (images, videos, audio)

Response:

• Server-Sent Events (SSE) stream with events:
  • status: Operation status messages
  • text: AI reasoning and code generation
  • tool_start: Tool execution started
  • tool_end: Tool execution completed
  • done: Video generation complete with preview URL
  • error: Error occurred during processing

POST /vibe/render

Render and download a completed video.

Request:

{
  "compositionId": "HelloWorld",
  "format": "mp4"
}

Response:

• Binary video file with appropriate Content-Type header

Project Structure

├── src/
│   ├── index.ts           # Main worker entry point with routes
│   ├── assets.ts          # Asset validation and utilities
│   ├── prompt.ts          # AI system prompt generation
│   ├── tools.ts           # AI tool definitions
│   └── skills/            # Remotion skill documentation
│       ├── index.ts       # Skill registry and exports
│       ├── types.ts       # TypeScript interfaces
│       └── rules/         # Individual skill content
├── public/
│   └── index.html         # Frontend UI (Alpine.js + Tailwind)
├── Dockerfile             # Container image for sandbox
├── wrangler.jsonc         # Cloudflare Workers configuration
└── package.json           # Dependencies

Resources

Official Documentation

• Cloudflare Workers - Complete Workers platform documentation
• Cloudflare Sandbox SDK - Sandbox container documentation
• Durable Objects - Persistent state and coordination
• AI Gateway - Unified interface to AI models

Framework & Library Documentation

• Remotion - Video generation with React
• Hono - Web framework for Workers
• Vercel AI SDK - AI model integration and streaming
• Alpine.js - Frontend interactivity

Related Resources

• Anthropic Claude API - Claude model documentation
• Node.js API Reference - Node.js runtime reference
• TypeScript Handbook - TypeScript documentation

License

MIT

See LICENSE file for details.