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 15–20 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 proxy (keeps API key private)
export async function POST(req: Request) {
  const { garmentUrl, personUrl } = await req.json()

  const res = await fetch('https://www.tryoncloud.com/api/tryon', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.TRYONCLOUD_API_KEY!,
    },
    body: JSON.stringify({
      garment_image_url: garmentUrl,
      person_image_url: personUrl,
    }),
  })

  const data = await res.json()
  return Response.json(data)
}

// hooks/useVirtualTryOn.ts
export function useVirtualTryOn() {
  const [status, setStatus] = useState<'idle'|'uploading'|'processing'|'done'|'error'>('idle')
  const [resultUrl, setResultUrl] = useState<string | null>(null)

  const tryOn = async (garmentUrl: string, personFile: File) => {
    setStatus('uploading')
    // 1. Get upload URL, upload photo
    const { uploadUrl, personUrl } = await getUploadUrl(personFile)
    await fetch(uploadUrl, { method: 'PUT', body: personFile })

    // 2. Submit try-on job
    setStatus('processing')
    const { job_id } = await fetch('/api/tryon', {
      method: 'POST',
      body: JSON.stringify({ garmentUrl, personUrl }),
    }).then(r => r.json())

    // 3. Poll for result
    for (let i = 0; i < 10; i++) {
      await new Promise(r => setTimeout(r, 3000))
      const result = await fetch(`/api/result/${job_id}`).then(r => r.json())
      if (result.status === 'complete') {
        setResultUrl(result.result_url)
        setStatus('done')
        return
      }
    }
    setStatus('error')
  }

  return { tryOn, status, resultUrl }
}

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 15–20 seconds — design UI for async experience

Frequently asked questions

Other integrations