Integration Guide

Add ImageLayer to Next.js

Register the ImageLayer Web Component from a Next.js client boundary, then fetch the publishable key and short-lived session token from your backend.

Quick start

Install

npm install @imagelayer/widget

Embed

jsx

'use client';
import '@imagelayer/widget';

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

Why Next.js + ImageLayer

App Router ready

Mark the component file with "use client" and the widget renders after hydration. Server Components pass the API key as a prop from environment variables.

Browser-only registration

Import the custom element from a client boundary so browser APIs are not evaluated during server rendering.

Edge and Node runtimes

Use a suitable server route to hold the secret key and mint scoped widget sessions. Keep secret credentials out of client props.

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 Next.js 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 Next.js

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

Create Workspace