Installation

Get started with Assets AI in your React application.

Install Package

npm install assets-ai

Basic Setup

1. Configure the Media System

Create a configuration file or add to your root layout:

app/layout.tsx

import { configureMedia, MediaProvider } from 'assets-ai';

// Configure the media system
configureMedia({
  apiEndpoint: "https://api.oblien.com/icons/fetch",
  apiToken: process.env.NEXT_PUBLIC_OBLIEN_TOKEN,
  manifestUrl: "/media-manifest.json",
  maxCacheSize: 2 * 1024 * 1024, // 2MB
  staticBaseUrls: {
    icon: "https://cdn.oblien.com/icons/",
    image: "https://cdn.oblien.com/images/",
    video: "https://cdn.oblien.com/videos/",
  },
});

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MediaProvider 
          batchDelay={500}
          maxCacheSize={2 * 1024 * 1024}
        >
          {children}
        </MediaProvider>
      </body>
    </html>
  );
}

2. Get Your API Token

.env.local

NEXT_PUBLIC_OBLIEN_TOKEN=your_token_here

3. Use Components

Now you can use Assets AI components anywhere in your application:

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

export default function Page() {
  return (
    <div>
      <Icon description="home" size={24} />
      <Image description="hero banner" width={800} height={400} />
      <Video description="product demo" controls />
    </div>
  );
}

Configuration Options

configureMedia(config)

Global configuration for the media system.

Option	Type	Description
`apiEndpoint`	string	API endpoint for fetching media
`apiToken`	string	Authentication token from Oblien
`manifestUrl`	string	URL to production manifest file
`maxCacheSize`	number	Maximum cache size in bytes (default: 1MB)
`staticBaseUrls`	object	Base URLs for static CDN assets

MediaProvider Props

Context provider that manages media state.

Prop	Type	Description
`batchDelay`	number	Milliseconds to wait before batching requests (default: 500)
`maxCacheSize`	number	Maximum cache size in bytes (default: 1MB)
`children`	ReactNode	Your application components

Environment Modes

Development Mode

In development, Assets AI will:

Send requests to the API endpoint
Cache URLs in localStorage
Batch multiple requests automatically
Show detailed logging in console

Production Mode

In production, Assets AI will:

Load URLs from a static manifest file
Skip API requests entirely
Provide optimal performance
No runtime overhead

To generate a production manifest, run the build command (coming soon).

TypeScript Support

Assets AI is written in TypeScript and includes full type definitions. No additional setup required.

import type { MediaType, MediaMap } from 'assets-ai';