How to Add AI Image Generation to Your App

Your users want to create images inside your app. Social posts, blog headers, internal announcements — they’re leaving your product, opening Canva or ChatGPT, generating something generic, and pasting it back. You lose engagement. They lose time. The images don’t match your brand.

Building image generation from scratch means standing up ML infrastructure, wrestling with prompt engineering, handling rate limits, and designing a UI your non-technical users can actually navigate. That’s months of work for most teams.

There’s a faster path.

What you’re building

By the end of this guide, your app will have an embedded AI image generation widget. Users pick a content type (quote card, blog promo, stat highlight), choose a platform preset (LinkedIn post, Instagram story, email banner), and get an image that matches your brand — right inside your product.

The entire integration is one HTML tag.

Step 1: Get your API key

Sign up for a free account — no credit card needed. You get 50 image credits to start.

Go to your dashboard, open API Keys, and create a new key. Copy it. You’ll use this in the widget configuration.

Step 2: Add the widget

Vanilla HTML

The simplest integration. Add the script tag and the widget element:

<script type="module" src="https://cdn.imagelayer.app/widget/latest/image-layer.js"></script>

<image-layer
  api-key="il_live_your_key_here"
  api-url="https://api.imagelayer.app"
/>

That’s the entire integration. The <image-layer> element is a native Web Component — browsers understand it natively, no build step required.

React

Web Components work in React without a wrapper. Import the package and use the tag directly:

import '@imagelayer/widget';

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

If you’re using TypeScript, React will warn about the unknown element. Add a type declaration:

declare namespace JSX {
  interface IntrinsicElements {
    'image-layer': React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement> & {
        'api-key': string;
        'api-url': string;
      },
      HTMLElement
    >;
  }
}

Vue

Vue handles Web Components natively. Use the tag in any .vue file:

<template>
  <image-layer
    api-key="il_live_your_key_here"
    api-url="https://api.imagelayer.app"
  />
</template>

<script setup>
import '@imagelayer/widget';
</script>

Tell Vue’s compiler to treat image-layer as a custom element in your vite.config.ts:

vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag === 'image-layer',
    },
  },
})

npm install (optional)

If you prefer bundling the widget with your app instead of loading from CDN:

npm install @imagelayer/widget

Then import it anywhere in your app. The custom element registers itself on import.

Step 3: Set up your brand kit

Go to Dashboard > Settings and configure your brand:

• Logo: upload your logo for overlays
• Colors: set your brand palette so generated images use your colors
• AI brand guidelines: describe your visual style, tone, and elements to avoid

The AI generates images in your brand style — not generic outputs with your logo stamped on top. This is the difference between “AI-generated image with a logo” and “image that looks like your design team made it.”

Step 4: Test it

Open your app with the widget embedded. Try creating a LinkedIn post image:

1. Select “Blog Promo” as the content type
2. Choose “LinkedIn Post” as the platform preset
3. Type a description of what you need
4. Hit generate

The image will match your brand guidelines and be sized correctly for LinkedIn (1200x627px). Your users can then add logo overlays in the branding editor and download the result.

What your users see

The widget walks users through a four-step flow:

1. Input — pick a content type, choose a platform, describe the image
2. Generate — AI creates the image following your brand guidelines
3. Brand — add logo, adjust layout, fine-tune the composition
4. Download — get the final image in the correct dimensions

No prompt engineering skills needed. The content type templates turn “write a prompt” into “fill in these fields.”

Beyond the basics

Once the widget is live, you can expand with:

• Sketch-to-image mode — users draw a rough sketch, AI refines it into a polished image (Pro plan)
• Reference images — upload a reference photo for the AI to use as a starting point (Pro plan)
• Custom content type templates — create templates specific to your use case
• Usage analytics — track who generates what and how many credits are used

Next steps

Create your free account and embed the widget. Most teams go from sign-up to a working integration in under 15 minutes.

If you have questions, check the documentation or reach out — we respond within a business day.