Oblien Docs

Assets AI

React components designed for AI agents to fetch media assets using natural language descriptions. Built to simplify media integration in AI-powered applications by allowing agents to request icons, images, and videos with simple text descriptions instead of managing file paths and asset libraries.

Why Assets AI?

Traditional asset management requires developers and AI agents to know exact file names, manage asset libraries, and handle complex path structures. Assets AI solves this by letting AI agents fetch any media using natural language descriptions:

// Instead of: <Icon src="/icons/home-regular.svg" />
<Icon description="home" variant="regular" />

// Instead of: <img src="/images/sunset-mountain-landscape-4k.jpg" />
<Image description="sunset over mountains" />

Perfect for AI-powered applications where agents generate UIs dynamically and need media without pre-configured asset catalogs.

Key Features

Description-Based Fetching

AI agents can request any media asset using natural language descriptions without knowing file names or managing asset libraries.

Intelligent Batching

Multiple media requests are automatically batched together to reduce API calls and improve performance. Critical for AI agents making numerous media requests.

Local Caching

Media URLs are cached in localStorage during development to speed up subsequent page loads. AI agents benefit from instant access to previously fetched assets.

Production Manifests

In production, media URLs are loaded from a static manifest file for optimal performance and reduced runtime overhead.

Loading States

Built-in skeleton loaders and customizable fallbacks provide smooth loading experiences while assets are being fetched.

Quick Example

import { Icon, Image, Video } from 'assets-ai';

function MyComponent() {
  return (
    <div>
      <Icon description="home" variant="regular" size={24} />
      <Image description="sunset over mountains" width={400} height={300} />
      <Video description="ocean waves" controls />
    </div>
  );
}

Next Steps