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.

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 AI Assistant edits images with Magic Image, so it also needs that feature. It stays hidden when features.ai.magicImage is false, when your plan does not include Magic Image, or when the end-user's signed feature policy denies ai.magicImage. Inside the Email Builder, the Image Editor inherits the builder's features, so features.ai.magicImage: false in unlayer.init hides it there too.

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​

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.

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.