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.

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,
    },
  },
});

Project ID Required

AI features require a projectId so usage can be attributed to your Unlayer project. Without a projectId, the AI Assistant is hidden from the editor.

Attributing AI usage to an end user

The Image Editor authenticates on its own, 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` if identity verification is on
  features: { ai: { enabled: true, assistant: true } },
});

Without user, AI 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. Identifying the user in unlayer.init({ user }) for the Email Builder does not cover the Image Editor.

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

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.