AI Configuration

Unlayer includes several AI-powered features that can enhance the editing experience. These AI features can help automate tasks like generating call to actions, creating images, and optimizing headings. Developers can control whether to enable or disable these AI features based on the needs of their application.

You can either enable/disable all AI features at once or configure specific AI features individually.

Enable or Disable All AI Features

To enable or disable all AI features globally, you can set the ai option in the features object during initialization.

unlayer.init({
  features: {
    ai: false  // Disables all AI features
  }
});

By default, AI features are enabled unless explicitly disabled using this option.

Controlling Specific AI Features

If you prefer to disable only certain AI features while leaving others active, you can customize them individually.

Smart Text

The Smart Text feature uses AI to generate optimized text based on context. You can disable this feature as shown below:

unlayer.init({
  features: {
    ai: {
      smartText: false  // Disables only Smart Text
    }
  }
});

Smart Buttons

The Smart Buttons feature uses AI to generate optimized buttons based on context. You can disable this feature as shown below:

unlayer.init({
  features: {
    ai: {
      smartButtons: false  // Disables only Smart Buttons
    }
  }
});

Smart Headings

The Smart Headings feature uses AI to generate optimized and relevant headings based on the content. To disable this feature, use the following configuration:

unlayer.init({
  features: {
    ai: {
      smartHeadings: false  // Disables only Smart Headings
    }
  }
});

Magic Images

The Magic Image feature helps generate or recommend images based on the design context. If you want to disable this feature while keeping other AI features enabled, use the following code:

unlayer.init({
  features: {
    ai: {
      magicImage: false  // Disables only Magic Image
    }
  }
});

Example: Custom AI Feature Configuration

If you want to disable certain AI features but keep others enabled, you can configure them selectively. For example, disabling only Smart Buttons and Magic Image, but keeping Smart Headings enabled:

unlayer.init({
  features: {
    ai: {
      smartText: false,
      smartButtons: false,
      magicImage: false,
      smartHeadings: true  // Keep Smart Headings enabled
    }
  }
});

Use Cases

• Customization: Some applications might not require certain AI-powered functionalities, so developers can selectively disable them to better suit their users’ needs.
• User Experience: If certain AI features do not align with your design workflow or user experience, you can easily turn them off while still benefiting from other AI functionalities.

Notes

• By default, AI features are enabled unless explicitly disabled using the features.ai option.
• You can control each AI feature independently for greater flexibility.
• Make sure to test how AI features affect your application to decide which ones to enable or disable based on your use case.