How to Add AI to Your App for Free

Adding AI image and video generation to your application used to mean hiring ML engineers, managing GPU infrastructure, and spending months on model training. In 2026, it is a single API call. You send a text prompt, you get an image back. The same integration pattern works whether you are building a SaaS app, a mobile app, an e-commerce platform, or a content management system.

This guide walks you through adding AI generation to six different app types, from the simplest static site to complex SaaS platforms. Every example uses the ZSky AI API, which gives you 100 free calls per day with no credit card.

The Integration Pattern

Regardless of your tech stack, the pattern is always the same:

1. User submits a prompt (text input in your UI)
2. Your backend calls the API (POST request with the prompt)
3. API returns an image URL (CDN-hosted, valid 24 hours)
4. Your frontend displays it (standard img tag or download)

The entire integration is one HTTP call. Everything else is your UI.

Integration 1: Static Website

Add an AI image generator to any HTML page. Use a server-side proxy endpoint to keep your API key safe, then call it from your frontend JavaScript:

// Frontend: call your proxy endpoint
async function generate() {
  const prompt = document.getElementById("prompt").value;
  const resultDiv = document.getElementById("result");
  resultDiv.textContent = "Generating...";

  const res = await fetch("/api/generate", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt })
  });

  const data = await res.json();
  const img = document.createElement("img");
  img.src = data.image_url;
  img.alt = prompt;
  resultDiv.textContent = "";
  resultDiv.appendChild(img);
}

Integration 2: Next.js / React App

// app/api/generate/route.ts (Next.js App Router)
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const res = await fetch("https://api.zsky.ai/v1/generate/image", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.ZSKY_API_KEY}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ prompt, width: 1024, height: 1024 })
  });

  const data = await res.json();
  return NextResponse.json(data);
}

// components/AIGenerator.tsx (Client component)
"use client";
import { useState } from "react";

export default function AIGenerator() {
  const [prompt, setPrompt] = useState("");
  const [image, setImage] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleGenerate() {
    setLoading(true);
    const res = await fetch("/api/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt })
    });
    const data = await res.json();
    setImage(data.image_url);
    setLoading(false);
  }

  return (
    <div>
      <input value={prompt} onChange={e => setPrompt(e.target.value)}
        placeholder="Describe your image..." />
      <button onClick={handleGenerate} disabled={loading}>
        {loading ? "Generating..." : "Generate"}
      </button>
      {image && <img src={image} alt={prompt} />}
    </div>
  );
}

Integration 3: Python / Django Backend

# views.py
import requests
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json, os

@csrf_exempt
def generate_image(request):
    if request.method != "POST":
        return JsonResponse({"error": "POST required"}, status=405)

    body = json.loads(request.body)
    prompt = body.get("prompt")

    if not prompt:
        return JsonResponse({"error": "prompt required"}, status=400)

    response = requests.post(
        "https://api.zsky.ai/v1/generate/image",
        headers={"Authorization": f"Bearer {os.environ['ZSKY_API_KEY']}"},
        json={"prompt": prompt, "width": 1024, "height": 1024},
        timeout=60
    )

    if response.status_code == 200:
        return JsonResponse(response.json())
    return JsonResponse({"error": "generation failed"}, status=500)

Integration 4: E-Commerce Product Images

Auto-generate product photo variations when a new product is added:

# product_images.py
import requests
import os

API_KEY = os.environ["ZSKY_API_KEY"]

def generate_product_images(product_name, product_description):
    """Generate 3 image variations for a new product."""
    angles = [
        f"{product_name}, {product_description}, front view, studio product photography, white background",
        f"{product_name}, {product_description}, lifestyle shot, in-use setting, natural light",
        f"{product_name}, {product_description}, detail close-up, macro, studio lighting"
    ]

    response = requests.post(
        "https://api.zsky.ai/v1/batch",
        headers={"Authorization": f"Bearer {API_KEY}"},
        json={
            "requests": [
                {"prompt": angle, "width": 1024, "height": 1024, "style": "photorealistic"}
                for angle in angles
            ]
        },
        timeout=120
    )

    results = response.json()["results"]
    return [r["image_url"] for r in results if r["status"] == "success"]

# Usage in your product creation flow:
# images = generate_product_images("Leather Wallet", "brown bifold minimalist")

Integration 5: Zapier / No-Code Automation

Connect the API to any no-code workflow using Zapier webhooks:

1. Create a Zapier Zap with a trigger (e.g., "New row in Google Sheets")
2. Add a "Webhooks by Zapier" action, configured as:
   • Method: POST
   • URL: https://api.zsky.ai/v1/generate/image
   • Headers: Authorization: Bearer YOUR_KEY, Content-Type: application/json
   • Body: {"prompt": "{{column_value}}", "width": 1024, "height": 1024}
3. Parse the response to get image_url
4. Add a follow-up action to upload the image or update your database

This same pattern works with Make (Integromat), n8n, and any automation tool that supports HTTP requests.

Integration 6: Mobile App (React Native)

// services/ai.ts
const API_URL = "https://your-backend.com/api/generate";

export async function generateImage(prompt: string): Promise<string> {
  const response = await fetch(API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt })
  });

  const data = await response.json();
  return data.image_url;
}

// In your component:
const [imageUrl, setImageUrl] = useState<string | null>(null);

const handleGenerate = async () => {
  const url = await generateImage(prompt);
  setImageUrl(url);
};

// Display with: <Image source={{ uri: imageUrl }} />

Best Practices for Production

Always Proxy Through Your Backend

Never expose your API key in client-side code. Route all requests through your server, even for simple apps. This protects your key and lets you add rate limiting, caching, and usage tracking.

Handle Loading States

Image generation takes 3-15 seconds. Show a skeleton loader, progress indicator, or placeholder animation. Never leave the user staring at a blank screen.

Cache Generated Images

If the same prompt is likely to be requested multiple times, cache the result URL. API image URLs are valid for 24 hours, so download and store images you need long-term.

Set Reasonable Timeouts

Use 60-second timeouts for standard images, 120 seconds for high-res or video. Implement retry with exponential backoff for transient failures.

Monitor Your Usage

Track API calls per user to prevent abuse. The free tier is 100 calls per day -- if you are serving multiple users, you will need a paid plan. Use the X-RateLimit-Remaining response header to track your limits in real time.

Cost Estimation by App Type

Frequently Asked Questions

How long does it take to add AI image generation to an app?

With a REST API like ZSky AI, you can have AI image generation working in your app in under 30 minutes. The integration is a single HTTP POST request. Most of the time is spent on UI decisions like where to place the generation button and how to display results, not on the API integration itself.

Can I add AI features to my app for free?

Yes. ZSky AI offers 100 free API calls per day with no credit card required. This is enough for MVPs, internal tools, and low-traffic apps. When your app grows beyond the free tier, paid plans start at $0.02 per image with no minimum commitment.

Do I need machine learning experience to integrate AI?

No. AI APIs abstract away all the machine learning complexity. You send a text prompt via HTTP and receive an image URL. If you can make an API call (which is basic web development), you can integrate AI. No ML knowledge, GPU hardware, or model training required.

What types of apps benefit from AI image generation?

Common integrations include social media management tools (auto-generate post images), e-commerce platforms (product photo variations), design tools (AI-assisted creation), marketing platforms (ad creative generation), gaming apps (dynamic asset generation), and content management systems (blog featured images).

Will AI API calls slow down my app?

AI image generation takes 3 to 15 seconds depending on resolution, so it should be handled asynchronously. Show a loading state to users, generate in the background, and display the result when ready. Never block your UI thread waiting for generation to complete.