Chat to Preview
The prompt-to-render loop: ask typed and sent, answer streamed, preview assembled.
SceneAdvanced
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, or its tab title in browser mode. |
| previewUrl | string | - | Address the preview is loading. Renders the surface as a browser (tab strip, URL bar and a load bar) and starts the page loading when the address is sent. |
| 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. |