Uploadcare React AI Image Editor

React wrapper for the Uploadcare AI Image Editor — 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-image-editor

2. Render the component:

import { AiImageEditor } from '@uploadcare/react-ai-image-editor';

<AiImageEditor
  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 { AiImageEditor } from '@uploadcare/react-ai-image-editor';

export default function Page() {
  return <AiImageEditor 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 { preloadAiImageEditor } from '@uploadcare/react-ai-image-editor';

preloadAiImageEditor();

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].