Skip to main content
Unlayer Docs
Version: Latest

AI Assistant

Paid Feature

This feature is only available in paid plans. Learn More

The AI Assistant adds a chat panel to the Image Editor where users describe the edit they want in plain language — "remove the background", "increase brightness", "make it look vintage" — and the editor applies it to the image. The panel also offers one-click suggestions for common edits.

AI edits participate in the same undo/redo history as manual edits, so users can freely combine both. Each request edits the current image, including any overlaid layers. To search for stock photos, generate a new image, or upload several references in one conversation, use the builder AI Assistant.

The image editor open over a selected image, showing the editing tool rail (Crop, Resize, Filter, Draw, Text, Shapes, Stickers, Frame)The image editor open over a selected image, showing the editing tool rail (Crop, Resize, Filter, Draw, Text, Shapes, Stickers, Frame)

Enabling the AI Assistant​

Enable the assistant through the features.ai flag:

window.ImageEditor.createEditor({
  container: '#editor-container',
  image: imageUrl,
  projectId: 1234, // Required for AI features
  features: {
    ai: {
      enabled: true,
      assistant: true,
    },
  },
});

The Image Editor requires AI Assistant access on your project. It stays hidden when features.ai.assistant or the legacy features.ai.magicImage switch is false, or when the end-user's signed feature policy denies ai.assistant or ai.magicImage. Inside the Email Builder, the Image Editor inherits the builder's feature configuration and authenticated session.

Project ID Required

AI features require a projectId, AI Assistant access on the project, and available credits. Legacy Magic Image access alone no longer enables AI editing in the Image Editor. Feature flags cannot grant access that the plan does not include. Manual editing remains available without AI access.

Attributing AI usage to an end user​

A standalone Image Editor created with window.ImageEditor.createEditor() authenticates separately from the Email Builder. Pass a user so its AI usage can be attributed to the person who made it:

window.ImageEditor.createEditor({
  container: '#editor-container',
  image: imageUrl,
  projectId: 1234,
  user: { id: 'user_123' }, // Add `signature` or `featurePolicyToken` if identity verification is on
  features: { ai: { enabled: true, assistant: true } },
});

Without user, standalone Image Editor usage is still billed to your project but is reported with end_user_id: null in the AI Credits usage API — under the image_edit feature type for edits, and image_generation for anything that creates a new image. The Image Editor opened from the Email Builder inherits the parent editor's authenticated session and end-user attribution, so it does not need separate user configuration.

AI edits without a user.id are deprecated, both standalone and when the Email Builder has no user.id. A future version will hide them, the same way the builder's AI Assistant already works, and the editor logs a console warning until then. Pass user to keep them.

See End-User Identification for the user fields and how to sign the id when identity verification is enabled.

Image model and availability​

The standalone chat supports features.ai.image.model and features.ai.image.quality. For example:

window.ImageEditor.createEditor({
  container: '#editor-container',
  image: imageUrl,
  projectId: 1234,
  user: { id: 'user_123' },
  features: {
    ai: {
      enabled: true,
      assistant: true,
      image: { model: 'openai', quality: 'medium' },
    },
  },
});

Omit model and quality to use the server defaults. Use features.ai.assistant: false or features.ai: false to disable the standalone chat. The builder Assistant's granular image controls (enabled, upload, generation, editing, search, enableDesignImageTargeting, and altText inside features.ai.image) do not control this separate chat. It does not currently forward fallbackModels.

Panel State​

When the AI Assistant is available, its panel starts open by default. Set aiAssistantOpenState to 'closed' if you want users to open it themselves from the tool rail:

window.ImageEditor.createEditor({
  container: '#editor-container',
  image: imageUrl,
  projectId: 1234,
  features: { ai: { enabled: true, assistant: true } },
  aiAssistantOpenState: 'closed', // 'open' (default) or 'closed'
});

Default Prompt​

You can pre-fill the chat input with a prompt — useful when your application already knows what the user wants to do (for example, a "Remove background" button that opens the editor):

window.ImageEditor.createEditor({
  container: '#editor-container',
  image: imageUrl,
  projectId: 1234,
  features: { ai: { enabled: true, assistant: true } },
  aiAssistantOpenState: 'open',
  defaultPrompt: 'Remove the background',
  autoSubmitPrompt: true, // Submit immediately instead of just pre-filling
});

With autoSubmitPrompt: false (the default), the prompt is pre-filled and the user submits it themselves.

info

Auto-submit only happens when the panel is open — autoSubmitPrompt: true requires aiAssistantOpenState: 'open'. With the panel closed, the prompt is only pre-filled.

Customizing the Assistant's Strings​

All AI Assistant copy — the panel title, input placeholder, progress messages, and the built-in suggestions — can be translated or overridden through the translations option using the image_editor.ai_assistant.* keys. See Configuration → Custom Translations and the Translation Reference.