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_ID and REMOTION_AWS_SECRET_ACCESS_KEY if 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 build or next build
• Output Directory: .next or dist
• Install Command: npm install

Deployment Steps

1. Push to Git: Commit your Agent Board code to your repository.
2. Import Project: In the Vercel Dashboard, click New Project and select your repository.
3. Set Framework Preset: Vercel should automatically detect Next.js. If you are using a custom setup, ensure the preset matches your codebase.
4. Add Environment Variables: Expand the Environment Variables section and paste the keys mentioned in the Configuration section above.
5. 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.