Quick Start

Getting Started with Agent Board

Agent Board is a specialized environment designed to streamline video production using Remotion and AI-driven agentic workflows. By following this guide, you will set up a local development environment that leverages pre-defined "skills" to automate complex video tasks like 3D rendering, caption generation, and dynamic asset management.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (LTS version)
• Package Manager: npm, pnpm, yarn, or bun
• Remotion: A basic understanding of React-based video creation

1. Initialize Your Project

First, create a new Remotion project or navigate to an existing one where you want to enable Agent Board skills.

npx create-video@latest my-video-project
cd my-video-project

2. Install Required Dependencies

Agent Board skills rely on specific Remotion packages. Depending on the skills you intend to use (3D, Audio, Captions), install the necessary libraries:

# For 3D content and Three.js integration
npx remotion add @remotion/three

# For audio processing and media management
npx remotion add @remotion/media

# For automated captioning and subtitles
npx remotion add @remotion/captions

3. Configure Agent Skills

Agent Board uses a .agent/ directory to store domain-specific knowledge. Copy the remotion-best-practices skill set into your project root to provide the agent with the rules required for frame-accurate animations and asset handling.

Your project structure should look like this:

.
├── .agent/
│   └── skills/
│       └── remotion-best-practices/
│           ├── SKILL.md
│           └── rules/
├── public/
├── src/
└── ...

4. Setting Up Local Configuration

The agent requires access to your public/ folder to manage assets. Ensure all images, audio, and video files are placed in public/. When writing your components, use the staticFile helper as enforced by the agent's best practices:

import { Img, staticFile } from 'remotion';

export const MyComponent = () => {
  // Agent Board automatically validates this path
  return <Img src={staticFile('logo.png')} />;
};

5. Launch the Development Studio

To see the Agent Board in action and preview your compositions, start the Remotion Studio. This allows the agent to monitor your code changes and provide real-time feedback based on the installed skills.

npm start

Next Steps

• Dynamic Data: Learn how to use calculateMetadata to set video duration based on external assets.
• 3D Scenes: Explore the 3d.md rule to integrate React Three Fiber into your timeline.
• Automated Captions: Use the display-captions.md guide to implement TikTok-style word highlighting.