Vercel Deployment Workflow

The Vercel deployment workflow allows you to host your Agent Board frontend and trigger Remotion video renders using Vercel’s serverless infrastructure. By combining Vercel's edge network with Remotion's rendering capabilities, you can build a seamless "Prompt-to-Video" pipeline.

Prerequisites

Before deploying, ensure your environment meets the following requirements:

• A Vercel account connected to your Git provider (GitHub, GitLab, or Bitbucket).
• An AWS account with Remotion Lambda deployed (required for production-grade rendering).
• The remotion and @remotion/lambda packages installed in your project.

Configuration

To successfully render videos on Vercel, you must configure specific environment variables and project settings to handle the communication between the Agent Board UI and the rendering engine.

Environment Variables

Add the following variables to your Vercel Project Settings (Settings > Environment Variables):

| Variable | Description | | :--- | :--- | | REMOTION_AWS_ACCESS_KEY_ID | Your AWS access key with Lambda execution permissions. | | REMOTION_AWS_SECRET_ACCESS_KEY | Your AWS secret key. | | REMOTION_APP_REGION | The AWS region where your Lambda functions are deployed (e.g., us-east-1). | | REMOTION_SERVE_URL | The URL where your Remotion bundle is hosted (usually your Vercel deployment URL). |

vercel.json Setup

Configure your vercel.json to handle longer-running serverless functions if you are performing metadata calculations or light rendering on the Vercel side:

{
  "functions": {
    "api/render.ts": {
      "maxDuration": 30,
      "memory": 1024
    }
  }
}

Deployment Steps

Follow this workflow to deploy your Agent Board to production:

1. Connect and Build

1. Import your repository into the Vercel Dashboard.
2. Set the Framework Preset to Next.js or Other depending on your project structure.
3. Ensure the Build Command includes the bundling of your Remotion project:

   npm run build
   

2. Deploy the Remotion Bundle

When you trigger a render, Remotion Lambda needs to access your code. The most efficient way is to use your Vercel deployment URL as the source.

• The Agent Board automatically uses process.env.VERCEL_URL during the deployment phase to point Remotion Lambda to the correct code bundle.

3. CI/CD Integration

Every push to your main branch will trigger a production deployment. Agent Board uses Vercel's Preview Deployments to allow you to test video compositions before they go live.

• Preview: Test animations and 3D content in the Remotion Studio.
• Production: Full-resolution renders triggered via API.

Handling Renders in Serverless Functions

In a Vercel environment, you should not perform heavy rendering (FFmpeg) directly inside a Vercel Function due to timeout limits. Instead, use the following pattern:

import { renderVideoOnLambda } from "@remotion/lambda";

export default async function handler(req, res) {
  // 1. Send the render job to AWS Lambda
  const { renderId, bucketName } = await renderVideoOnLambda({
    region: process.env.REMOTION_AWS_REGION,
    functionName: "remotion-render-function",
    composition: "MyComposition",
    inputProps: req.body.props,
    serveUrl: process.env.REMOTION_SERVE_URL,
  });

  // 2. Return the ID to the Agent Board UI for polling
  return res.status(200).json({ renderId, bucketName });
}

Best Practices for Vercel

• Asset Hosting: Place static assets (images, fonts, audio) in the public/ folder. Use the staticFile() helper to ensure correct path resolution on Vercel subdirectories.
• Caching: Use Vercel's Edge Caching for static assets and pre-rendered video segments.
• Concurrency: Monitor your AWS Lambda concurrency limits to ensure that multiple users triggering renders from the Agent Board don't hit bottlenecks.