AI image placeholder
Quiet sparkle field that reserves an image slot while an AI image is generated.
Use this when a Cal surface is waiting on a generated image. It is AI presentation, not conversation chrome — do not nest it inside Agent UI. Agent UI owns messages, reasoning, tools, and the composer. This control owns the media slot that sits in place of the finished image.
This page documents the shared control. It is not wired into product yet.
import {
ImageGenerationField,
ImageGenerationPlaceholder,
} from "@calcom/ai/react/ui/image-generation-placeholder";Ownership
Feature — @calcom/ai/react/ui. Presentation-only: the caller starts and cancels the request, and replaces this control when generation settles. Status copy and Stop belong to the host. It lives next to Agent UI because both are AI presentation, not because a generated image belongs in the chat frame.
Do not recreate the canvas. Import ImageGenerationPlaceholder for the 2:1 slot, or ImageGenerationField when the host already owns the frame.
Use when
- An AI image is in flight and the finished asset's frame must stay reserved.
- Partial frames from a stream should sit under the field instead of popping in at the end.
Do not use AgentStatusIndicator, AgentReasoning, or a spinner-only empty state for generated media.
Demo
waiting is the sparkle field before any frame arrives. partial is one streamed frame under the field. The status row and Stop in the demo are host chrome; they are not part of the component.
Generating a cover image for your event…
<ImageGenerationPlaceholder partialSrc={partialSrc} />Reduced-motion preferences freeze the sparkle field. The partial frame stays.
API
ImageGenerationPlaceholder
| Prop | Type | Notes |
|---|---|---|
partialSrc | string | null | Optional in-flight frame. When set, it shows as delivered and the field recedes to white at opacity-48. |
className | string | Merged onto the frame. The frame stays aspect-2/1. |
partialImageTestId | string | Optional test id for the in-flight image. Native data-testid lands on the root. |
The root is aria-busy. The field is aria-hidden.
ImageGenerationField
Decorative canvas that fills its parent and draws in currentColor. Sparkles and the traveling stitch freeze when prefers-reduced-motion: reduce. Use it only when the host already provides the frame; a 2:1 slot should import ImageGenerationPlaceholder.
Call sites
None in product yet. The first intended host is a Cal Event cover slot.
Example URLs
Not in product yet. Review the demo on this page, or locally at http://localhost:4001/docs/composites/ai-image-placeholder.
Related
- Agent UI — conversation frame; not this media slot
- Image & Banner Uploaders — picked files, not generated ones