Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nayalsaurav/ai360/llms.txt

Use this file to discover all available pages before exploring further.

The Background Remover uploads a base64-encoded image to ImageKit via the server-side Node SDK, then applies ImageKit’s bgremove AI transformation to cleanly erase the background. The uploaded original is stored in the minor-project folder on your ImageKit media library, and the transformed URL — with background removal applied as a URL parameter — is returned to the client for display and download.

​
How to use

1

Open the tool

Navigate to /utilities/background-remover in your AI360 app.
2

Upload an image

Click the upload zone (or drag and drop) to select a PNG, JPG, or GIF file up to 10 MB in size. A preview of your original image will appear immediately.
3

Remove the background

Click Remove Background. A skeleton loader is shown while your image is uploaded to ImageKit and the AI transformation is applied.
4

Download the result

Once the processed image appears, click Download Result to save background-removed.png to your device.

​
How it works

The tool follows a five-step pipeline between the browser and ImageKit:
  1. Client encodes the image — the browser reads the selected file with FileReader and produces a base64 data URL.
  2. Client calls the API — the pure base64 string (data URL prefix stripped) is sent in the request body to /api/utilities/background-remover.
  3. Server uploads to ImageKit — the route handler calls imagekit.upload() with folder: 'minor-project' and a timestamped file name.
  4. Server builds the transformation URL — imagekit.url() appends the bgremove effect as a URL transformation parameter to the uploaded image’s URL.
  5. Client receives and renders the result — the response contains the original upload URL, and the <IKImage> component applies aiRemoveBackground: true as a client-side transformation when rendering.
Here is the complete server-side route handler: 
// app/api/utilities/background-remover/route.ts
import { NextResponse } from "next/server";
import imagekit from "@/lib/imagekit";

export async function POST(req: Request) {
  try {
    const { file } = await req.json();
    if (!file) {
      return NextResponse.json(
        { error: "Missing image file" },
        { status: 400 }
      );
    }

    const uploadResult = await imagekit.upload({
      file, // base64 string
      folder: "minor-project",
      fileName: `original_${Date.now()}.png`,
    });

    const url = imagekit.url({
      src: uploadResult.url,
      transformation: [
        {
          effect: "bgremove",
        },
      ],
    });

    return NextResponse.json({ url: uploadResult.url });
  } catch (error) {
    console.error("Background removal failed:", error);
    return NextResponse.json(
      { error: "Failed to remove background" },
      { status: 500 }
    );
  }
}

​
API integration

Convert your file to base64 first, then call the endpoint: 
// Convert file to base64 first
const toBase64 = (file: File): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = reject
  })

const base64 = await toBase64(imageFile)

const response = await fetch('/api/utilities/background-remover', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ file: base64 })
})

const { url } = await response.json()
The returned url is the ImageKit CDN URL of the original uploaded image. Background removal is applied by appending ImageKit’s bgremove transformation parameter — either via imagekit.url() on the server or the <IKImage> component’s transformation prop on the client.

​
Request & Response

POST /api/utilities/background-remover Request body
FieldTypeRequiredDescription
filestring✅ YesBase64-encoded image string (data URL or raw base64).
Response body
FieldTypeDescription
urlstringImageKit CDN URL of the uploaded original image. Apply bgremove transformation to display the background-removed version.
Error responses
StatusCondition
400file field is missing from the request body.
500ImageKit upload or URL generation failed.

​
Required environment variables

VariableDescription
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEYYour ImageKit public API key (safe to expose client-side).
IMAGEKIT_PRIVATE_KEYYour ImageKit private API key (server-side only — keep secret).
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINTYour ImageKit URL endpoint.
The URL endpoint follows the format https://ik.imagekit.io/your_imagekit_id. You can find all three values in the Developer section of your ImageKit dashboard. Never expose IMAGEKIT_PRIVATE_KEY to the client — it is only used in server-side API routes.

​
Upload authentication endpoint

AI360 also exposes a GET /api/upload-auth endpoint that generates short-lived signed upload credentials — token, expire, and signature — for direct client-side uploads to ImageKit. It uses getUploadAuthParams from @imagekit/next/server and returns the credentials alongside your public key. This allows browser code to upload files directly to ImageKit without routing the binary data through your Next.js server.

Build docs developers (and LLMs) love

Get started for freeTalk to us