Integration Guide

Add ImageLayer to Astro

Load the ImageLayer client-side Web Component from Astro, render the image-layer element, and assign the publishable key and server-issued session token after registration.

Quick start

Embed

astro

---
// src/pages/create.astro
---
<html lang="en">
  <body>
    <image-layer
      id="imagelayer-widget"
      api-url="https://api.imagelayer.app"
    />

    <script>
      import '@imagelayer/widget';
    </script>
  </body>
</html>

Why Astro + ImageLayer

No island directive needed

The widget is a Web Component, not a framework component. It registers its own custom element and hydrates without client:load or client:visible.

CDN or npm

Load from CDN with a script tag for zero build overhead, or npm install for tighter bundling. Both approaches work in Astro.

Static site compatible

For a static Astro output, load and register the widget on the client after the page HTML is delivered.

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 Astro 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 Astro

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

Create Workspace