Vercel Deployment
Deploying Agent Board to Vercel allows you to host your video creation interface and preview engine in a highly available, serverless environment. This guide covers the configuration required to ensure Remotion compositions and the Agent Board dashboard function correctly in a production Vercel environment.
Overview
Agent Board uses Remotion to power its video generation. While the user interface and Studio can be hosted on Vercel, the actual rendering of video files is typically offloaded to Remotion Lambda (AWS) due to the timeout limits of Vercel Serverless Functions.
This deployment strategy ensures your UI remains responsive while the heavy lifting of video encoding happens in the background.
Prerequisites
Before deploying, ensure you have:
- A Vercel account connected to your Git provider.
- The
REMOTION_AWS_ACCESS_KEY_IDandREMOTION_AWS_SECRET_ACCESS_KEYif you plan to enable server-side rendering. - Ensured all assets are referenced using the
staticFile()helper (see Assets Guide).
Configuration
Environment Variables
You must configure the following environment variables in your Vercel Project Settings to enable video rendering and asset management.
| Variable | Description |
| :--- | :--- |
| REMOTION_AWS_ACCESS_KEY_ID | Your AWS access key for Lambda rendering. |
| REMOTION_AWS_SECRET_ACCESS_KEY | Your AWS secret key for Lambda rendering. |
| REMOTION_AWS_REGION | The region where your Lambda functions are deployed (e.g., us-east-1). |
| NEXT_PUBLIC_STUDIO_URL | (Optional) The URL of your deployed Agent Board instance. |
Build Settings
Agent Board typically uses a standard Next.js or Vite build command. Ensure your build settings in Vercel match your framework:
- Build Command:
npm run buildornext build - Output Directory:
.nextordist - Install Command:
npm install
Deployment Steps
- Push to Git: Commit your Agent Board code to your repository.
- Import Project: In the Vercel Dashboard, click New Project and select your repository.
- Set Framework Preset: Vercel should automatically detect Next.js. If you are using a custom setup, ensure the preset matches your codebase.
- Add Environment Variables: Expand the Environment Variables section and paste the keys mentioned in the Configuration section above.
- Deploy: Click Deploy. Vercel will build your project and provide a production URL.
Performance Optimizations
Serverless Function Limits
Standard Vercel plans have a default timeout for serverless functions (typically 10-60 seconds). If you are performing data-heavy metadata calculations using calculateMetadata, ensure your API calls are optimized. For long-running video renders, always use the Remotion Lambda integration rather than trying to render directly within a Vercel function.
Caching Assets
To improve preview performance in the Agent Board Studio:
- Use a CDN for large video backgrounds.
- Ensure the
public/folder contains only necessary static assets. - Leverage the
staticFile()function to ensure proper pathing in Vercel's distributed environment.
// Correct usage for Vercel deployment
import { staticFile, Img } from 'remotion';
export const Logo = () => {
return <Img src={staticFile('brand-logo.png')} />;
};
Troubleshooting
Assets returning 404
If images or videos are failing to load on your deployed URL, verify that you are not using relative paths like ./logo.png. You must use staticFile('logo.png') to ensure the URL is correctly resolved on Vercel's edge network.
"Browser not supported" Errors
Remotion requires a Chromium-based environment to render. While the Agent Board UI works in most modern browsers, if you are running automated tests or screenshots on Vercel, ensure you are using a compatible environment or the @remotion/renderer package with correctly configured Chromium flags.