Image
Image elements hold raster art (photos, screenshots, illustrations). Click Image in the top toolbar to insert.
Adding an image
Three sources, all available from the inspector once an image element is selected:
- Upload — drag a file onto the inspector or click "Upload." Accepted formats: PNG, JPG, WebP, GIF, SVG. Files are stored in your org's Supabase bucket and a signed URL goes into
src. - Pick from existing — opens a picker showing every image previously uploaded to this deck. No re-upload, no duplicate storage.
- Paste URL — for hotlinked images. The inspector accepts any valid HTTPS URL.
Auto-description for the agent
When you upload an image, the SDK automatically calls a vision API to generate a one-paragraph description. The result drops into the inspector's Description field. The agent uses it for context — so when the visitor asks "what's that on slide 4?", the agent knows.
You can edit the description manually. The auto-fill is a starting point, not a contract.
Inspector
| Name | Type | Description |
|---|---|---|
| src* | string (URL) | Image URL. Set via Upload, Pick, or paste. |
| alt | string | Visible alt text. Read by screen readers; not currently shown in agent context. |
| description | string | Auto-filled from vision API on upload. Sent to the agent as page context. |
| fit | "cover" | "contain" | "fill" | How the image scales inside its bounding box. cover crops, contain letterboxes, fill stretches. |
| cornerRadius | number (px) | Rounded corners. 0 = sharp, half the smaller dimension = circular crop. |
Fit modes
Schema reference
json
{
"type": "image",
"position": { "x": 80, "y": 200, "w": 1100, "h": 600 },
"src": "https://storage.acme.com/slide-images/hero.jpg",
"alt": "Two-seater couch in a living room",
"description": "A modern grey two-seater fabric couch in a sunlit living room with a wooden floor and tall windows.",
"fit": "cover",
"cornerRadius": 12
}