Message Elements | PraisonAIUI Docs

Message ElementsPraisonAIUI supports rich inline message elements for displaying images, PDFs, videos, audio, files, and code blocks within chat messages.Element Types1. Image ElementsDisplay images with thumbnail and click-to-zoom functionality.Properties:url (required): Image URLname (optional): Display namealt (optional): Alt text for accessibilitydisplay (optional): Display mode - "inline" (default), "side", "page"width (optional): Fixed width in pixelsheight (optional): Fixed height in pixels2. PDF ElementsDisplay PDF documents with inline viewer or link to open in new tab.Properties:url (required): PDF URLname (optional): Display namedisplay (optional):"inline": Embedded PDF viewer (600px height)"side": Smaller embedded viewer (400px height)"page": Link to open in new tab3. Video ElementsDisplay videos with native HTML5 video player.Properties:url (required): Video URLname (optional): Display namecontrols (optional): Show video controls (default: True)autoplay (optional): Auto-play video (default: False)loop (optional): Loop video (default: False)4. Audio ElementsDisplay audio with native HTML5 audio player.Properties:url (required): Audio URLname (optional): Display namecontrols (optional): Show audio controls (default: True)autoplay (optional): Auto-play audio (default: False)loop (optional): Loop audio (default: False)5. File ElementsDisplay downloadable files with file type icons and size information.Properties:url (required): File download URLname (optional): Display namesize (optional): File size in bytesmime_type (optional): MIME type for file type detection6. Code ElementsDisplay syntax-highlighted code blocks with copy functionality.Properties:content (required): Code contentlanguage (optional): Programming language for syntax highlightingname (optional): Display nameDisplay ModesAll elements support three display modes:inline (default): Full width, normal displayside: Smaller size, suitable for sidebarspage: Full page width, maximum sizeSize LimitsFile elements: Maximum 100MB per fileCode elements: Maximum 1MB per code blockImages: No size limit (browser-dependent)Accessibility FeaturesImages: Alt text support, keyboard navigation for zoomPDFs: Proper ARIA labels and rolesVideos/Audio: Native browser accessibilityFiles: Icon-based file type recognitionCode: Copy button with keyboard supportLow-Level APIFor advanced use cases, you can use the low-level element API:Legacy SupportThe new element system maintains backward compatibility with existing message properties:message.images (still supported)message.files (still supported)New message.elements takes precedence when both are presentThis ensures existing code continues to work while providing a migration path to the new standardized element system.Agent-generated images (streaming)When an agent or tool creates an image during a chat run, the UI receives message_element events over WebSocket/SSE and renders them inline. This uses the same element dict shape as above but is driven by the RunEvent protocol, not only Message.send().See Image Preview in Chat for the full architecture: detection (media_utils), provider bridge, persistence, and swappable backends.