Chat To Preview
The prompt-to-render loop: ask typed and sent, answer streamed, preview assembled.
SceneScenesAdvanced
chat-to-preview30fps · 960×540
Install
$ npx remotion-ui@latest add chat-to-previewThe ask types itself into the composer under a caret and flies up into the thread on send; the assistant thinks, then streams its answer word by word; and the preview surface assembles alongside it — status moving Idle → Rendering → Ready, wireframe blocks landing in order, then resolving into the rendered scene under a single sheen.
messages drives the whole clock: user turns type and send, assistant turns
stream, and the timing is derived from the text rather than from fixed frames.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/chat-to-preview- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: messages, previewTitle, previewCaption, previewLabel, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { ChatToPreview } from "@/remotion/scenes/chat-to-preview";
<ChatToPreview messages={messages} previewTitle="Ship the scene" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | ChatMessage[] | - | The exchange, in order. User turns type and send; assistant turns stream. Drives the whole clock. |
| previewTitle | string | "Ship the scene" | Title the finished preview renders. |
| previewCaption | string | - | Supporting line under the preview title. |
| previewLabel | string | "Preview" | Name of the preview surface in its header. |
| placeholder | string | - | Composer placeholder before anything is typed. |
| accentColor | string | "#E8B86D" | Assistant bubble, status, and render tint. |
| backgroundColor | string | - | Overrides the page background. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |