Integration Guide

Add ImageLayer to React

Import the ImageLayer Web Component in a React client surface, then assign the publishable key and server-issued session token as properties.

Quick start

Install

npm install @imagelayer/widget

Embed

jsx

import '@imagelayer/widget';

function ImageGenerator() {
  return (
    <image-layer
      id="imagelayer-widget"
      api-url="https://api.imagelayer.app"
    />
  );
}

Why React + ImageLayer

No wrapper component needed

Web Components render natively in React. No HOC, no context provider, no ref forwarding — just a JSX tag.

Client-side lifecycle

TypeScript support

Add a type declaration for the custom element and get full IntelliSense on attributes like api-key and api-url.

How it works

Set up workspace context

Add approved assets, colors, and optional guidance. Generated drafts still require review.

Embed and authenticate

Load the component in your React app and have your backend issue a tenant-scoped session token.

Admit eligible requests

Users can submit image, video, standalone audio, or text only when the current catalog, entitlement, credits, spend controls, provider, and billing mode allow it.

Plan the product workflow

Follow the end-to-end app integration tutorial.Review the REST API for session and generation flows.Match the embed to a social, commerce, content, or internal workflow.

Start building with React

Create a workspace to configure the widget and server-minted session tokens. No generation credits are included with the Free workspace.

Create Workspace