Template: LLM-based Code Generation

package.json

@@ -43,6 +43,7 @@
 		"node": ">=16"
 	},
 	"devDependencies": {
+		"@types/babel__standalone": "^7.1.9",
 		"@types/bun": "catalog:",
 		"@types/deno": "2.0.0",
 		"@types/react": "catalog:",

packages/create-video/src/templates.ts

@@ -44,7 +44,8 @@ export type Template = {
 		| 'tiktok'
 		| 'code-hike'
 		| 'render-server'
-		| 'recorder';
+		| 'recorder'
+		| 'code-generation';
 	defaultBranch: string;
 	featuredOnHomePage: string | null;
 	previewURL: string | null;
@@ -531,6 +532,28 @@ export const FEATURED_TEMPLATES: Template[] = [
 		allowEnableTailwind: true,
 		contributedBy: null,
 	},
+	{
+		homePageLabel: 'Code Generation',
+		shortName: 'Code Generation',
+		org: 'remotion-dev',
+		repoName: 'template-code-generation',
+		description: 'AI-powered code generation for Remotion',
+		longerDescription:
+			'A template that uses AI to generate Remotion video code from prompts.',
+		promoBanner: {
+			width: 1280,
+			height: 720,
+			src: '/img/code-generation-template.png',
+		},
+		cliId: 'code-generation' as const,
+		type: 'image' as const,
+		defaultBranch: 'main',
+		featuredOnHomePage: null,
+		previewURL: null,
+		templateInMonorepo: 'template-code-generation',
+		allowEnableTailwind: false,
+		contributedBy: null,
+	},
 ].filter(truthy);
 
 export const PAID_TEMPLATES = [

packages/template-code-generation/.env.example

@@ -0,0 +1,4 @@
+REMOTION_AWS_ACCESS_KEY_ID=
+REMOTION_AWS_SECRET_ACCESS_KEY=
+
+OPENAI_API_KEY=

packages/template-code-generation/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+out/
+.env
+build

packages/template-code-generation/.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

packages/template-code-generation/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "useTabs": false,
+  "bracketSpacing": true,
+  "tabWidth": 2
+}

packages/template-code-generation/README.md

@@ -0,0 +1,28 @@
+# template-code-generation
+
+AI-powered code generation template for Remotion.
+
+## Adding examples and capabilities
+
+When adding new capabilities to the assistant, we have to first create some examples to let the system know what we can do. So first we add the example to the template, tweak it a bit more to get it right with our taste and then add it as an example potentially to the system prompt of the assistant.
+
+## Model Selection
+
+GPT5.1 Low reasoning seems to be a good middle ground between generation speed and output quality.
+
+## Usage
+
+```bash
+npx create-video@latest --template code-generation
+```
+
+## Development
+
+```bash
+bun install
+bun dev
+```
+
+## License
+
+Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).

packages/template-code-generation/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

packages/template-code-generation/config.mjs

@@ -0,0 +1,10 @@
+/**
+ * Use autocomplete to get a list of available regions.
+ * @type {import('@remotion/lambda').AwsRegion}
+ */
+export const REGION = "us-east-1";
+
+export const SITE_NAME = "my-next-app";
+export const RAM = 3009;
+export const DISK = 10240;
+export const TIMEOUT = 240;

packages/template-code-generation/deploy.mjs

@@ -0,0 +1,79 @@
+import {
+  deployFunction,
+  deploySite,
+  getOrCreateBucket,
+} from "@remotion/lambda";
+import dotenv from "dotenv";
+import path from "path";
+import { DISK, RAM, REGION, SITE_NAME, TIMEOUT } from "./config.mjs";
+import { webpackOverride } from "./src/remotion/webpack-override.mjs";
+
+console.log("Selected region:", REGION);
+dotenv.config();
+
+if (!process.env.AWS_ACCESS_KEY_ID && !process.env.REMOTION_AWS_ACCESS_KEY_ID) {
+  console.log(
+    'The environment variable "REMOTION_AWS_ACCESS_KEY_ID" is not set.',
+  );
+  console.log("Lambda renders were not set up.");
+  console.log(
+    "Complete the Lambda setup: at https://www.remotion.dev/docs/lambda/setup",
+  );
+  process.exit(0);
+}
+if (
+  !process.env.AWS_SECRET_ACCESS_KEY &&
+  !process.env.REMOTION_AWS_SECRET_ACCESS_KEY
+) {
+  console.log(
+    'The environment variable "REMOTION_REMOTION_AWS_SECRET_ACCESS_KEY" is not set.',
+  );
+  console.log("Lambda renders were not set up.");
+  console.log(
+    "Complete the Lambda setup: at https://www.remotion.dev/docs/lambda/setup",
+  );
+  process.exit(0);
+}
+
+process.stdout.write("Deploying Lambda function... ");
+
+const { functionName, alreadyExisted: functionAlreadyExisted } =
+  await deployFunction({
+    createCloudWatchLogGroup: true,
+    memorySizeInMb: RAM,
+    region: REGION,
+    timeoutInSeconds: TIMEOUT,
+    diskSizeInMb: DISK,
+  });
+console.log(
+  functionName,
+  functionAlreadyExisted ? "(already existed)" : "(created)",
+);
+
+process.stdout.write("Ensuring bucket... ");
+const { bucketName, alreadyExisted: bucketAlreadyExisted } =
+  await getOrCreateBucket({
+    region: REGION,
+  });
+console.log(
+  bucketName,
+  bucketAlreadyExisted ? "(already existed)" : "(created)",
+);
+
+process.stdout.write("Deploying site... ");
+const { siteName } = await deploySite({
+  bucketName,
+  entryPoint: path.join(process.cwd(), "src", "remotion", "index.ts"),
+  siteName: SITE_NAME,
+  region: REGION,
+  options: { webpackOverride },
+});
+
+console.log(siteName);
+
+console.log();
+console.log("You now have everything you need to render videos!");
+console.log("Re-run this command when:");
+console.log("  1) you changed the video template");
+console.log("  2) you changed config.mjs");
+console.log("  3) you upgraded Remotion to a newer version");

packages/template-code-generation/eslint.config.mjs

@@ -0,0 +1,53 @@
+import js from "@eslint/js";
+import nextPlugin from "@next/eslint-plugin-next";
+import remotion from "@remotion/eslint-plugin";
+import tseslint from "typescript-eslint";
+
+// Build Next.js recommended rules and an "off" map for overrides
+const nextRecommended = nextPlugin.configs.recommended ?? { rules: {} };
+const nextRecommendedRules = nextRecommended.rules ?? {};
+const offNextRules = Object.fromEntries(
+  Object.keys(nextRecommendedRules).map((k) => [k, "off"]),
+);
+
+export default [
+  // Global ignores
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+      "next.config.js",
+      "deploy.mjs",
+    ],
+  },
+  // Base JS recommended
+  js.configs.recommended,
+  // TypeScript recommended (non type-checked for speed/simplicity)
+  ...tseslint.configs.recommended,
+  // Next.js recommended rules applied to app code
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    plugins: { "@next/next": nextPlugin },
+    rules: {
+      ...nextRecommendedRules,
+    },
+  },
+  // Remotion rules applied only to remotion files
+  {
+    files: ["src/remotion/**"],
+    ...remotion.flatPlugin,
+    rules: {
+      ...remotion.flatPlugin.rules,
+    },
+  },
+  // Disable all Next.js rules within remotion files
+  {
+    files: ["src/remotion/**"],
+    rules: {
+      ...offNextRules,
+    },
+  },
+];

packages/template-code-generation/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

packages/template-code-generation/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "template-code-generation",
+  "version": "4.0.379",
+  "description": "AI-powered code generation template for Remotion",
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion/tree/main/packages/template-code-generation"
+  },
+  "homepage": "https://www.remotion.dev",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "remotion": "remotion studio",
+    "render": "remotion render",
+    "deploy": "node deploy.mjs"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^2.0.74",
+    "@ai-sdk/react": "^2.0.104",
+    "@babel/standalone": "^7.28.5",
+    "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@react-three/fiber": "^9.4.2",
+    "@remotion/animated-emoji": "workspace:*",
+    "@remotion/bundler": "workspace:*",
+    "@remotion/cli": "workspace:*",
+    "@remotion/google-fonts": "workspace:*",
+    "@remotion/lambda": "workspace:*",
+    "@remotion/lottie": "workspace:*",
+    "@remotion/paths": "workspace:*",
+    "@remotion/player": "workspace:*",
+    "@remotion/shapes": "workspace:*",
+    "@remotion/tailwind-v4": "workspace:*",
+    "@remotion/three": "workspace:*",
+    "ai": "^5.0.104",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.555.0",
+    "monaco-editor": "^0.55.1",
+    "monaco-jsx-syntax-highlight": "^1.2.2",
+    "next": "16.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "remotion": "workspace:*",
+    "tailwind-merge": "^3.4.0",
+    "three": "^0.181.2",
+    "zod": "^4.1.13"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "3.1.0",
+    "@eslint/js": "9.38.0",
+    "@next/eslint-plugin-next": "15.1.6",
+    "@remotion/eslint-plugin": "workspace:*",
+    "@tailwindcss/postcss": "4.1.1",
+    "@types/node": "20.12.14",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
+    "@types/three": "^0.181.0",
+    "@types/web": "0.0.166",
+    "@typescript-eslint/eslint-plugin": "8.46.0",
+    "@typescript-eslint/parser": "8.46.0",
+    "autoprefixer": "10.4.20",
+    "dotenv": "16.0.3",
+    "eslint": "9.19.0",
+    "eslint-config-next": "15.1.6",
+    "postcss": "8.4.47",
+    "prettier": "3.6.0",
+    "tailwindcss": "4.0.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.8.2",
+    "typescript-eslint": "8.46.0"
+  }
+}

packages/template-code-generation/postcss.config.mjs

@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;