Uploadcare React AI Enhancer

React wrapper for the Uploadcare AI Enhancer — an AI image editor: generate images from a prompt or edit existing ones, with the result stored on Uploadcare. Typed props, callback events, and SSR support out of the box.

Quick start

1. Install the package:

npm install @uploadcare/react-ai-enhancer

2. Render the component:

import { AiEnhancer } from '@uploadcare/react-ai-enhancer';

<AiEnhancer
  pubkey="YOUR_PUBLIC_KEY"
  onDone={({ url }) => console.log(url)}
/>;

Works with React 17, 18, and 19. Props mirror the element API — including the layout options — and events arrive as typed callbacks; apiRef exposes the underlying element. See the React guide.

SSR & Next.js

The component is SSR-safe out of the box and can be used directly from Next.js App Router Server Components — no next/dynamic and no wrapper file needed:

// app/page.tsx — a Server Component
import { AiEnhancer } from '@uploadcare/react-ai-enhancer';

export default function Page() {
  return <AiEnhancer pubkey="YOUR_PUBLIC_KEY" fallback={<div>Loading…</div>} />;
}

The server renders the fallback prop; the editor engine loads in the browser after mount. To skip the loading window, warm the engine cache ahead of time — on hover, idle, or route prefetch (details):

import { preloadAiEnhancer } from '@uploadcare/react-ai-enhancer';

preloadAiEnhancer();

More in the SSR & Next.js docs.

Security issues

If you think you ran into something in Uploadcare libraries that might have security implications, please hit us up at [email protected] or Hackerone.

We'll contact you personally in a short time to fix an issue through co-op and prior to any public disclosure.

Feedback

Issues and PRs are welcome. You can provide your feedback or drop us a support request at [email protected].