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
remotionand@remotion/lambdapackages 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
- Import your repository into the Vercel Dashboard.
- Set the Framework Preset to
Next.jsorOtherdepending on your project structure. - 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_URLduring 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 thestaticFile()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.