AkurAI/Framework

Media Components

A collection of native HTML media components for rendering images, galleries, videos, and audio in the AI chat interface.

Image

Renders a responsive image card with optional caption. Uses lazy loading and aspect-ratio preservation.

Payload shape:

{
  src: string,        // Required. Image URL (sets directly to <img src>).
  alt?: string,       // Optional. Alt text for accessibility.
  caption?: string    // Optional. Caption text below the image.
}

Example:

{
  src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800",
  alt: "Mountain landscape",
  caption: "A serene mountain landscape at sunset"
}

Rendering:

Image Gallery

Renders a responsive grid of thumbnails with a lightbox overlay. Click any image to enlarge it; press Esc or click the overlay to close.

Payload shape:

{
  images: Array<{
    src: string,      // Required. Image URL.
    alt?: string      // Optional. Alt text for the thumbnail.
  }>
}

Example:

{
  images: [
    { src: "https://example.com/photo1.jpg", alt: "Mountain" },
    { src: "https://example.com/photo2.jpg", alt: "Valley" },
    { src: "https://example.com/photo3.jpg", alt: "Lake" }
  ]
}

Rendering:

Video

Renders a native <video> element with browser controls and optional caption.

Payload shape:

{
  src: string,        // Required. Video URL (sets directly to <video src>).
  poster?: string,    // Optional. Poster image URL (preview frame).
  caption?: string    // Optional. Caption text below the video.
}

Example:

{
  src: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/big_buck_bunny.mp4",
  poster: "https://peach.blender.org/wp-content/uploads/image/poster_bunny.png",
  caption: "Sample video — Big Buck Bunny"
}

Rendering:

Audio

Renders a native <audio> element with browser controls and optional title.

Payload shape:

{
  src: string,      // Required. Audio URL (sets directly to <audio src>).
  title?: string    // Optional. Title text above the player.
}

Example:

{
  src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
  title: "Sample audio track"
}

Rendering:

Design Notes

Lazy Loading

Images and galleries use loading="lazy" to defer loading off-screen images until they're about to be scrolled into view. This speeds up initial page load, especially in long conversations.

XSS Safety

All components safely set src, alt, href, and text content from the payload. No innerHTML is used. Text content is set via textContent, preventing injection.

Native Elements

Components use browser-native <img>, <video>, and <audio> elements — no custom players, no libraries. Users get standard browser UI and full keyboard accessibility.

Responsive Design

Styling

Components reuse the design system:

Accessibility