Skip to main content
Integrations

One widget. Any framework.

ImageLayer is a native Web Component. Pick your framework, add one tag, and your users can create images, video, voiceovers, and text inside your app.

React

Add AI media generation to any React app — no wrapper components, no context providers.

View guide

Vue

Embed AI media generation in Vue apps — native Web Component support, zero config.

View guide

Next.js

Add AI media generation to Next.js — App Router and Pages Router compatible.

View guide

Angular

Embed AI media generation in Angular — register the custom element schema and go.

View guide

Svelte

Add AI media generation to Svelte apps — zero config, zero warnings.

View guide

Astro

Embed AI media generation in Astro — script tag or npm, both work.

View guide

How it works

ImageLayer is built as a native Web Component — a browser-standard technology supported by every modern framework. That means no wrappers, no adapters, no framework-specific packages to maintain. You add one <image-layer> tag and it works.

The widget handles the entire generation flow: prompt input, supported AI workflows, brand controls, and delivery. Your users create on-brand content without ever leaving your application.

Three steps to integrate

  1. Add the script tag — load the widget from the CDN or self-host it. One line of HTML.
  2. Create a session token — call the ImageLayer API from your backend to authenticate your user. This keeps your API key server-side.
  3. Drop in the widget — add the <image-layer> element wherever you want the generator to appear. Style it with CSS custom properties to match your brand.

Every integration guide below walks through the framework-specific setup — from package installation to passing props and handling events. Pick your stack and you'll have AI media generation running in under 15 minutes.

Don't see your framework? The widget is a standard Web Component — it works in anything that renders HTML. See the docs for the full integration guide.