Remotion

The Remotion connector exposes tools that an agent can use to render videos from React-defined compositions. Renders happen inside a CIAB sandbox (local or EC2) for isolation and reproducibility. Output lands in the artifact store.

Use it for: onboarding walkthroughs generated from graph data, weekly ops recap videos, auto-generated demo reels.

Prerequisites

CIAB enabled (AGENTCY_FEATURES_CIAB=true). See CIAB Overview.
Node ≥ 18 in the sandbox toolchain (bundled in the default EC2 AMI and the remotion Docker image).
A Remotion project — either a repo you clone in or the built-in starter.

Register a source

bash

curl -X POST http://localhost:8080/api/v1/sources \
  -H "authorization: Bearer $TOKEN" -H 'content-type: application/json' \
  -d '{
    "name":"remotion-starter",
    "connector":"remotion",
    "realm":"design",
    "config":{
      "project":{"kind":"bundled","template":"intro"},
      "render_defaults":{"fps":30,"codec":"h264","resolution":"1080p"}
    }
  }'

Project options:

bundled — one of the starter templates we ship (intro, slideshow, graph-recap).
git — an agent-accessible Git repo with a remotion.config.ts at root.
custom — upload a tarball.

Tools

Tool	Effect	Purpose
`remotion.list_compositions`	read	List composition ids in the project.
`remotion.render(composition_id, props, output?)`	write	Render a composition with props; returns an artifact id.
`remotion.render_preview(composition_id, props, frame)`	read	Render a single frame as PNG (fast, no ffmpeg).
`remotion.still(composition_id, props, time)`	read	Render a still at a specific timestamp.

Render flow

1. Agent decides on props (graph data, text, captions).
2. Calls remotion.render_preview for 3-5 key frames — cheap, fast.
3. User approves the style (approval flow) or the agent iterates.
4. remotion.render kicks off the full render inside CIAB.
5. Output (.mp4) is uploaded to the artifact store.
6. Artifact url is posted back to chat.

Typical render times on a t4g.small EC2 CIAB instance:

Duration	Resolution	Time
30s	1080p	~2 min
2 min	1080p	~8 min
30s	4K	~7 min

Heavy renders should run on a beefier instance type. Set per-source config.ciab_instance_type.

Feeding data from the graph

Compositions often take graph data as props. The agent can chain:

rag.search("top incidents this week", top_k=5)
  → pass summaries as a `props.events` array
  → remotion.render("WeeklyRecap", { events, week: "2026-W17" })

Example composition (WeeklyRecap.tsx):

tsx

import { AbsoluteFill, Sequence } from "remotion";

export const WeeklyRecap = ({ events, week }: Props) => (
  <AbsoluteFill style={{ background: "#111", color: "#fff" }}>
    <h1>{week} incidents</h1>
    {events.map((e, i) => (
      <Sequence key={e.id} from={i * 90} durationInFrames={90}>
        <div style={{ padding: 48 }}>
          <h2>{e.title}</h2>
          <p>{e.summary}</p>
        </div>
      </Sequence>
    ))}
  </AbsoluteFill>
);

Cost & rate

Renders are LLM-cheap (no generation tokens) but compute-expensive. Guardrails:

REMOTION_MAX_DURATION_SECS (default 300).
REMOTION_MAX_RENDERS_PER_DAY (per org, default 50).
Policies can gate further, e.g. "only admins can render > 60 s clips".

Gotchas

Fonts. The sandbox doesn't have your brand font by default. Ship it in the project repo (src/fonts/…) and import via @remotion/fonts.
First render on a fresh sandbox is slow — npm ci runs. Subsequent renders reuse node_modules.
Audio. Needs ffmpeg. Present in the bundled AMI; verify in custom sandboxes.

Remotion ​

Prerequisites ​

Register a source ​

Tools ​

Render flow ​

Feeding data from the graph ​

Cost & rate ​

Gotchas ​

Next ​