Virtual Try-On API for React, Next.js & Angular — Frontend Guide

Why use TryOnCloud with React & Next.js

• Works with any JavaScript framework — React, Next.js, Angular, Vue
• TypeScript types provided for API request and response shapes
• Next.js API route example included — keeps API key server-side
• React hook useVirtualTryOn available for clean component integration
• Streaming-ready — display a loading state while AI processes

How to set up TryOnCloud on React & Next.js

Estimated setup time: 2–3 hours. Difficulty: Intermediate.

1. 1

   Create a server-side proxy API route

   In Next.js, create app/api/tryon/route.ts. This route calls TryOnCloud's API using your API key from environment variables. Never call TryOnCloud directly from the browser.

2. 2

   Handle image upload

   Create an upload endpoint (app/api/upload-url/route.ts) that returns a pre-signed URL for the customer photo. The browser uploads directly to the signed URL, not through your server.

3. 3

   Build the React try-on component

   Create a TryOnButton component that triggers a file picker, uploads the photo, calls your /api/tryon proxy, and polls /api/result/{id} until the result is ready.

4. 4

   Display the result

   Show the result image in a modal or inline below the product image. Add a Compare button to toggle between the original product photo and the try-on result.

5. 5

   Add error and loading states

   Show a spinner during the 7 second processing window. Handle errors from the API (unsupported format, no garment detected) with user-friendly messages.

Code example

Next.js: Server-side API route proxy + React hook

// app/api/tryon/route.ts — server-side (keeps the API key private)
export async function POST(req: Request) {
  const form = await req.formData(); // garment_image + person_image from the browser

  const res = await fetch("https://www.tryoncloud.com/api/v1/generate", {
    method: "POST",
    headers: { "X-API-KEY": process.env.TRYONCLOUD_API_KEY! },
    body: form,
  });

  if (!res.ok) {
    return Response.json(await res.json(), { status: res.status });
  }
  // The response body IS the PNG — stream it straight back to the browser.
  return new Response(res.body, { headers: { "Content-Type": "image/png" } });
}

// components/TryOnButton.tsx (client)
async function runTryOn(garment: File, person: File) {
  const fd = new FormData();
  fd.append("garment_image", garment);
  fd.append("person_image", person);
  const res = await fetch("/api/tryon", { method: "POST", body: fd });
  if (!res.ok) { const { error } = await res.json(); throw new Error(error); }
  return URL.createObjectURL(await res.blob()); // <img src={thisUrl} />
}

Things to know

• ⓘAPI key must be kept server-side — never expose in client-side JavaScript
• ⓘImage upload requires a file upload endpoint (provided example uses Next.js API routes)
• ⓘProcessing time is 7 seconds — design UI for async experience

Frequently asked questions

Other integrations