Image
Gen UI 2.0 standardAn image from a URL. A click opens it full-screen. Set description to say what the image shows, unless it is only decoration.
One of the 69 components in CopilotKit's standardUI. The playground's catalog extends it, so every agent here can use Image. Standard catalog docs
Props
Read from standardUI.manifestComponents in the installed @copilotkit/react-core. In A2UI 1.0 any value may also be a { "@path" } binding into the surface data model or a { "@call" } function call.
| Prop | Type | Required | Description |
|---|---|---|---|
| url | string | Yes | Image URL |
| description | string | No | What the image shows, for screen readers. Leave it unset only for a decorative image |
| onOverlayClick | Action (event or functionCall) | No | Sent when the user clicks the actionOverlay button and it has no href. |
| variant | "icon" | "avatar" | "smallFeature" | "mediumFeature" | "largeFeature" | "header" | No | The size: "icon" 24px, "avatar" 40px round, "smallFeature" 160px wide, "largeFeature" and "header" full width. Default "mediumFeature": the natural size |
| fit | "cover" | "contain" | "fill" | "none" | "scaleDown" | No | CSS object-fit. Default "cover" |
| frame | boolean | No | - |
| position | string | No | CSS object-position, for example "top" or "50% 20%" |
| hideOnFailure | boolean | No | Default false |
| fallback | string | No | Text shown in place of the image when it does not load |
| hoverZoom | boolean | No | A slight zoom on hover |
| lightbox | boolean | No | Default true: a click opens the image full-screen |
| actionOverlay | { label, icon?, href? } | No | A button over the bottom-right corner of the image. Without href, it sends onOverlayClick |
| weight | number | No | flex-grow in a Row or Column |
| aspectRatio | string | No | - |
| radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | ... | number | string | { topLeft?, topRight?, bottomLeft?, bottomRight? } | No | - |
| width | number | string | No | - |
| height | number | string | No | - |
| maxWidth | number | string | No | - |
| maxHeight | number | string | No | - |
| minWidth | number | string | No | - |
| minHeight | number | string | No | - |
| background | string | No | - |