Uploadcare AI Image Editor

AI image generation and editing for Uploadcare — a framework-agnostic <uc-ai-image-editor> web component, plus an optional plugin that adds an AI Edit action and a Generate image source to the Uploadcare File Uploader. Generate images from a text prompt, edit existing ones by uuid, and commit the result back as an already-uploaded Uploadcare file.

Quick start

1. Install the package:

npm install @uploadcare/ai-image-editor

2. Use the standalone editor — importing the package registers the element; configure it via properties and pick a layout, theme, and locale:

import '@uploadcare/ai-image-editor';

<uc-ai-image-editor pubkey="YOUR_PUBLIC_KEY"></uc-ai-image-editor>

const editor = document.querySelector('uc-ai-image-editor');
editor.addEventListener('uc:done', (e) => console.log(e.detail.url));

All uc:* events and their payloads are listed in the API reference.

Client-only: importing the package registers custom elements, so it must run in the browser — in SSR apps load it behind a client boundary (see Bundlers & SSR), or use the SSR-safe React wrapper.

Or as a File Uploader plugin, assuming a working File Uploader setup (@uploadcare/file-uploader ≥ 1.31.2) — the plugin reads its settings from the uploader config:

npm install @uploadcare/ai-image-editor @uploadcare/file-uploader

import * as UC from '@uploadcare/file-uploader';
import { AiImageEditorPlugin } from '@uploadcare/ai-image-editor/plugin';

UC.defineComponents(UC);
document.querySelector('uc-config').plugins = [AiImageEditorPlugin];

Add ai-image-editor to the config's source-list to expose the Generate image source; the AI Edit action appears on uploaded images automatically. Full setup in the plugin guide.

You need an Uploadcare public key from the dashboard. Using React? See @uploadcare/react-ai-image-editor.

Documentation

Everything else lives in the docs:

• Getting started — install, entry points, first render
• Integrating into your app — Vue, Angular, Svelte, bundlers, SSR
• File Uploader plugin — configuration and behavior
• UI & layout, Theming, Localization
• API reference — properties, events, exported types

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