Features

This page highlights the main features of the AI Accelerator module. Each feature section provides:

  • Everyone : An overview of the feature

  • Developers : How to activate the feature

  • Authors : A brief look at what the feature looks like inside Magnolia

    Check out our AI Image Editor.

Migration overview

The table below is an overview of the components that use the new Model and Task registry as of version 2.2.1.

Feature Now Soon Discontinued

AI-powered text fields

AI-powered variant generation

AI-powered component generation

AI-powered story generation

AI-powered SEO metadata field

AI-powered page generation

AI-assisted text fields

AI-assisted extension tools

AI image generation

DALL-E integration

DALL-E discontinued; included in the AI Image generation

Hyper prompt

AI prompts engineering (Hyper Prompt)

To achieve content that perfectly matches your brand’s values, while also being optimized for the right audience and for search engines, simple prompts won’t cut it.

Hyper Prompt offers a flexible engine to create tone perfect, SEO optimized and scalable content in a breeze.

The app stores customizable prompts that can be used in [AI powered component generation], [AI powered variant generation] and [AI powered stories generation]. It offers a convenient way to create a consistent corporate identity and tone of voice across all content that is generated via the AI accelerator.

The prompt picker field allows developers to integrate Hyper Prompts, created using Hyper Prompt app into their own dialogs and custom AI workflows.

RAG-references to content apps

From version 1.1.1, we support Retrieval-Augmented Generation (RAG) to improve the relevance and accuracy of AI-generated content. RAG combines the power of prompt-based generation with information retrieved from external sources, ensuring that the generated content is not only coherent but also enriched with up-to-date and contextually relevant information from Magnolia content apps.

This feature is currently in the developer preview state. The feature will be further enhanced in the near future to make it more convenient to use as a prompt engineer.

References to Magnolia content apps can be enabled using a special syntax variable name: Note fro version 1.2.0 these special reference templates can be configured (see smartInjectTemplates Configuration)

${ref:<workspaceName>:<variable name>.<jcr property name>} (1)
${pagesRef:(<variable name>.<jcr property name>)} (2)
${ecommerceRef::<variable name>.<product property name>} (3)
${jsonRef:<variable name>.<rest property name>} (4)
1 JCR example: ${ref:personas:Person.jcrName}
2 Page link example: ${pagesRef:Page.title}
3 Product picker example: ${ecommerceRef:Product.sku}
4 REST Datasource example: ${jsonRef:Posts.body}
hyper prompts ref

  • Developers

  • Authors

To activate the prompt picker feature:

  1. Go to the <light-module-folder>/<light-module-name>/dialogs/pages/<dialog>.yaml file in your project.

  2. Ensure that you have the following in the file:

    <light-module-folder>/<light-module-name>/dialogs/pages/<dialog>.yaml
    form:
  implementationClass: info.magnolia.ui.javascript.form.FormViewWithChangeListener (1)
  properties:
    #...
    promptPicker: (2)
      $type: aiPromptPicker
      label: Prompts
    #...
    1 Ensure you have the info.magnolia.ui.javascript.form.FormViewWithChangeListener implementation class.
    2 The prompt picker.

The value is propagated in formFields in with the name <fieldName>.prompt (e.g promptPicker.prompt) and has the following format.

{
  "@id": "<prompt id>",
  "@name": "<prompt jcr name>",
  "@nodeType": "prompt",
  "@path": "<prompt prat>",
  "name": "<prompt name>",
  "promptTemplate": "${Title}\n${Article}", # The defined prompt template including variables in the form ${<variableName>}
  "variables": {  # Contains the resolved variables from the picker
    "Title": "test",
    "Article": "when iaa"
  }
}

Authors can use the ready-made prompts to create new content pieces, as well as to fine-tune or improve existing content. Authors can also test and iterate on the prompts without the need of switching to other apps within Magnolia.

prompts app
prompt picker

DALL-E integration

DALL-E integration is available from version 1.0.7.

The DALL-E integration makes DALL-E’s public API accessible and usable through Magnolia. The following functions are provided:

  • Generating and storing images based on text (DALL-E 3)

  • Creating image variants (DALL-E 2)

  • Creating modified images (DALL-E 2)

  • Developers

  • Authors

To activate the feature:

  1. Go to the <light-module-folder>/<light-module-name>/decorations/assets/apps/dam.yaml file in your project.

  2. Ensure that you have the following in the file:

    <light-module-folder>/<light-module-name>/decorations/assets/apps/dam.yaml
    subApps:
  jcrBrowser:
    actions:
      generateAsset:
        label: Generate Asset
        icon: icon-import
        $type: openDialogAction
        dialogId: ai-accelerator-ui:dall-e-create-image (1)
        populate: false
        availability:
          root: true
          writePermissionRequired: true
          rules:
            notDeleted:
              $type: jcrIsDeletedRule
              negate: true
      generateEdit:
        label: Generate Edit
        icon: icon-import
        $type: openDialogAction
        dialogId: ai-accelerator-ui:dall-e-edit-image (2)
        populate: false
        availability:
          root: true
          writePermissionRequired: true
          rules:
            notDeleted:
              $type: jcrIsDeletedRule
              negate: true
      generateVariation:
        label: Generate Variation
        icon: icon-import
        $type: openDialogAction
        dialogId: ai-accelerator-ui:dall-e-create-variation (3)
        populate: false
        availability:
          root: true
          writePermissionRequired: true
          rules:
            notDeleted:
              $type: jcrIsDeletedRule
              negate: true
    actionbar:
      sections:
        asset:
          groups:
            generate:
              items:
                - name: generateEdit
                - name: generateVariation
        folder:
          groups:
            generate:
              items:
                - name: generateAsset
                - name: generateEdit
                - name: generateVariation
        root:
          groups:
            generate:
              items:
                - name: generateAsset
                - name: generateEdit
                - name: generateVariation
    1 DALL-E create.
    2 DALL-E edit.
    3 DALL-E create variation.

Once activated, you can go to the Generate asset subapp and enter the values you want in the prompt fields to generate amazing images.

image generation

AI-powered component generation

Generate page components in a flash with the AI Accelerator module.

  • Developers

  • Authors

To activate the feature:

  1. Go to the <light-module-folder>/<light-module-name>/decorations/pages-app/apps/pages-app.yaml file in your project.

  2. Ensure that you have the following in the file:

    <light-module-folder>/<light-module-name>/decorations/pages-app/apps/pages-app.yaml
    subApps:
  detail:
    actions:
      generateComponent: (1)
        label: Generate component
        $type: openDialogAction
        icon: icon-add-item
        dialogId: ai-accelerator-ui:generateComponent
        populate: false
        availability:
          rules:
            addible:
              class: info.magnolia.pages.app.detail.action.availability.IsAreaAddibleRuleDefinition
      generateComponentWithSelectedComponent: (2)
        label: Generate component
        $type: openDialogAction
        icon: icon-add-item
        dialogId: ai-accelerator-ui:generateComponentWithSelectedComponent
        populate: false
    actionbar:
      sections:
        areaActions:
          groups:
            addingActions:
              items:
                - name: generateComponent
            edit:
              items:
                - name: generateComponentWithSelectedComponent
    1 Generate components.
    2 Generate components with selected component.

Once activated, you can rapidly generate components by selecting a template and providing a topic in the dialog prompt.

component generator

AI-powered variant generation

Generate personalized content variants.

  • Developers

  • Authors

To activate the feature:

  1. Go to the <light-module-folder>/<light-module-name>/decorations/pages-app/apps/pages-app.yaml file in your project.

  2. Ensure that you have the following in the file:

    <light-module-folder>/<light-module-name>/decorations/pages-app/apps/pages-app.yaml
    subApps:
  detail:
    actions:
      generateVariant: (1)
        label: Generate component Variant
        $type: openDialogAction
        icon: icon-add-item
        dialogId: ai-accelerator-ui:generateVariant
        populate: false
    actionbar:
      sections:
        componentActions:
          groups:
            variant:
              items:
                - name: generateVariant (2)
    1 The generate variant action.
    2 Ensure it is available to your action bar.

Once activated, you can generate variants by clicking Generate component variation and selecting a segment.

personalization generator

AI-powered story generation

Generate compelling stories with the click of a button. Story-Gen allows you to generate complete story outlines followed by a refining step in which the outlines are refined.

  • Developers

  • Authors

To activate the feature:

  1. Go to the <light-module-folder>/<light-module-name>/decorations/stories/apps/stories.yaml file in your project.

  2. Ensure that you have the following in the file:

    <light-module-folder>/<light-module-name>/decorations/stories/apps/stories.yaml
    subApps:
  browser:
    actions:
      generateBlogPost: (1)
        label: Generate Story
        icon: icon-import
        $type: openDialogAction
        dialogId: ai-accelerator-ui:generateStory
        populate: false
        availability:
          root: true
          writePermissionRequired: true
          nodeTypes:
            folder: mgnl:folder
          rules:
            notDeleted: &notDeleted
              $type: jcrIsDeletedRule
              negate: true
    actionbar: (2)
      sections:
        story:
          groups:
            addActions:
              items:
                - name: generateBlogPost
        folder:
          groups:
            addActions:
              items:
                - name: generateBlogPost
        root:
          groups:
            addActions:
              items:
                - name: generateBlogPost
    1 Generate story action.
    2 Ensure it’s available in your action bar.

Once activated, you can provide a Story outline and then further refine your story using OpenAI straight from the dialog prompt.

stories generator

AI-powered SEO metadata field

Automatically generates SEO and OG metadata, including page title, description, and keywords, based on the page content for search engine optimization and social media sharing.

Supports multilingual sites.

  • Developers

  • Authors

To activate the feature:

  1. Go to the <light-module-folder>/<light-module-name>/dialogs/pages/<dialog>.yaml file in your project.

  2. Ensure that you have the following in the file:

    <light-module-folder>/<light-module-name>/dialogs/pages/<dialog>.yaml
    form:
  implementationClass: info.magnolia.ui.javascript.form.FormViewWithChangeListener (1)
  properties:
    #....
    seoGenerator: (2)
      $type: aiSeoMetadataGenerator
      label: AI Seo Metadataasseawads
      parameters:
        titleField: title # value is the property name of the field in the dialog
        metaDescriptionField: metaDescription
        ogDescriptionField: ogDescription
        metaKeywordsField: metaKeywords
        # ogTitleField: ogTitle
        # ogDescriptionField: ogDescription
        metaDataFields: # note all fields here need to have a corresponding parameter
          title: Title
          metaDescription: Description
          # ogTitle: ogTitle
          # ogDescription: ogDescription
          metaKeywords: Meta keywords
        excludedProperties: # Name of a property that should not be taken into account for metadata creation
          noIndexPage: noIndexPage
          navigation: navigation
          hideHero: hideHero
          seoGenerator: seoGenerator
          footer: footer
    #...
    1 Ensure you’re using the info.magnolia.ui.javascript.form.FormViewWithChangeListener implementation class.
    2 The SEO generator.

Once activated, go to the Meta tab in your Pages app to and click Generate SEO Metadata.

metadata generator

AI-powered page generation

Generate full pages based on your template sets.

Only components and templates that are enabled using availableTemplates and availableComponents can be used for generating pages.

  • Developers

  • Authors

To activate the feature:

  1. Go to the <light-module-folder>/<light-module-name>/decorations/pages-app/apps/pages-app.yaml file in your project.

  2. Ensure that you have the following in the file:

    <light-module-folder>/<light-module-name>/decorations/pages-app/apps/pages-app.yaml
    subApps:
  browser:
    actions:
      generatePage:
        label: Generate page
        $type: openDetailSubappAction
        icon: icon-add-item
        appName: pages-app
        subAppName: generatePage
        availability:
          root: true
          writePermissionRequired: true
          nodeTypes:
            page: mgnl:page
          rules:
            notDeleted:
              $type: jcrIsDeletedRule
              negate: true
    actionbar:
      sections:
        crud:
          groups:
            abTest:
            add-delete:
              items:
                - name: generatePage
  generatePage: (1)
    class: info.magnolia.ai.automations.ui.AiAssistedSubAppDescriptor
    label: Generate page
    fieldScript: /openai-automations/webresources/page-generator/app.html
    parameters:
      assetsFolder: /
      minCharacterOfAIPrompt: 5 # optional: default 2
      maxCharacterOfAIPrompt: 1000 # optional: default 500
    1 Generate the page.

Once activated, go to Generate page and choose from the available templates.

page generator

AI-powered text fields

Available from version 1.0.5.

You can generate text in a textField based on a self-defined translatable prompt which you can enrich with variable content from the dialog properties. Generate text automatically in a text field based on a developer-defined prompt, which can include dynamic variables from the dialog’s properties. AI-powered text fields are designed to create tailored content (e.g., descriptions) with minimal user input, streamlining content creation.

Recap

  • Use case: Ideal for generating structured, context-specific text, like product descriptions or metadata, based on predefined rules.

  • Example: A field generating a 100-word description using variables from other form fields (e.g., tags).

  • Developers

  • Authors

Example definition
form:
  implementationClass: info.magnolia.ui.javascript.form.FormViewWithChangeListener
  properties:
    #....
    description:
      $type: aiTextField
      prompt: "My wonderful ${paramName} description of what the AI should generate." (1)
      words: 100 (2)
      rows: 6 (3)
      properties: (4)
        tags: tags
    #...
Callout Parameter Description

1

prompt

required

The prompt field defines the instruction given to the AI to generate the text value. It can be either fixed in the field definition or defined by the i18n property key.

Variable substitutions are available. In addition to self-definable variables via the property properties, the ${lang} variable is also available. This variable inserts the language currently being edited at the position used.

2

words

optional, default is `50`

Defines the maximum words returned.

3

rows

optional, default is `2`

Defines the initial height of the textarea.

4

properties

optional

Defines properties for variable substitution in the prompt. The key is used as name for the variable. The value defines the name of the field from the form definition e.g. of the dialog.

Authors can use AI-powered text fields by clicking the icon next to an AI-powered field and choosing the the options:

ai powered example

AI-assisted text fields

Available from version 1.1.1.

Enhance existing or new text fields with AI-driven tools to assist users in editing or generating text interactively. Transform standard text fields into AI-enhanced ones, offering extensions like summarizing, expanding, or changing tone for flexible content refinement.

AI-powered forms feature allows developers to easily transform any existing text fields in a Magnolia dialog into AI enhanced text fields. Use the AI-assisted text field in your forms or turn textField into an AI-powered textField.

Recap

  • Use case: Best for user-driven content editing, where the AI suggests improvements or generates text based on user interaction.

  • Example: A title field where the user can summarize or expand text with a click, with a max length of 150 characters.

  • Developers

  • Authors

There are two options to enable aiAssistedTextField in your forms.

  • Single aiAssistedTextField

    <light-module-folder>/<light-module-name>/dialogs/<dialog>.yaml
    form:
  implementationClass: info.magnolia.ui.javascript.form.FormViewWithChangeListener
  properties:
    #....
    title:
      $type: aiAssistedTextField
      label: Title
      placeholder: Insert title text here
      i18n: true
    #....

  • textField to aiAssistedTextField

    <light-module-folder>/<light-module-name>/dialogs/<dialog>.yaml
    form:
  implementationClass: info.magnolia.ai.automations.ui.AiAssistedFormView (1)
  properties:
    #....
    title:
      $type: textField
      label: Title
      placeholder: Insert title text here
      i18n: true
      maxLength : 150 (2)

    description:
      $type: textField
      label: Description
    #....
    1 Using implementationClass: info.magnolia.ai.automations.ui.AiAssistedFormView converts all traditional textField fields to aiAssistedTextField fields.
    2 Optional, allows to limit the number of characters. Generated text will be truncated if the number of characters exceeds the limit.

Authors can use AI-assisted text fields by clicking the icon next to an AI-assisted field and choosing the the options:

  • Rewrite

  • Expand

  • Simplify

  • Change tone

  • Hyper prompts

  • Summarize

ai assisted example

Configure extension tools for AI-assisted text field

From version 2.1.0

By default, all enabled default extensions of the ai-accelerator-ui module (see defaultExtensions) are available in the aiAssistedTextField. If different extensions should be used in a aiAssistedTextField this can be achieved with the optional property extensions. Only enabled extensions will be displayed.

    #....
    title:
      $type: aiAssistedTextField(1)
      maxLength : 150 (2)
      extensions:
        SeoMetadataKeywordsBlockTool: (3)
          extension: SeoMetadataKeywordsBlockTool (4)
          config: (5)
            numKeywords: 7
    #....
1 Using extensions requires the type explicitly to be set to aiAssistedTextField.
2 Optional, generated text will be truncated if the number of characters exceeds the limit.
3 Just a key, the name does not matter
4 Has to be a name of an enabled ai-accelerator extension
5 Config depends on the used extension

The following configuration for the default tools are available for decoration.

Config Extension Description

numWords

  • SummarizeTool

  • SummarizeBlockTool

Desired approximate number of words. Default is 50.

numWords

  • ExpandTool

  • ExpandBlockTool

Desired number of words. Default is 100.

showDialog

  • ExpandTool

  • ExpandBlockTool

If true dialog is shown where the user can specify the desired number of words. Default is false.

prompt

  • SimplifyTool

  • SimplifyBlockTool

Prompt instructions.
Some extensions make use of extension dialogs that must also be available. Below a list is given showing the extensions and required dialogs. Required dialogs that are not present will result in an error.
Extension Dialog

  • ChangeToneTool

  • ChangeToneBlockTool

ChangeToneDialog

  • ExpandTool

  • ExpandBlockTool

ExpandDialog

  • HyperPromptTool

  • HyperPromptBlockTool

HyperPromptDialog

SEO Metadata generation

From version 2.1.0

The following extensions are available for seo metadata generation:

  • SeoMetadataDescriptionBlockTool

  • SeoMetadataKeywordsBlockTool

  • SeoMetadataTitleBlockTool

The extensions for generation of SEO metadata description and title approximate maxLength if defined on the aiAssistedTextField.

The following specific configurations are available for decoration:

Config Description Available for

excludedProperties

Properties to exclude for metadata generation. It is a good idea to include meta-data fields manually to prevent existing bias for the AI.

  • SeoMetadataDescriptionBlockTool

  • SeoMetadataKeywordsBlockTool

  • SeoMetadataTitleBlockTool

numWords

Amount of words to be generated. For description this number is approximate. For the title this is the maximum.

  • SeoMetadataDescriptionBlockTool

  • SeoMetadataTitleBlockTool

numKeywords

Number of keywords to be generated.

  • SeoMetadataKeywordsBlockTool

AI image generation

From version 2.1.0 Generate images using configured AI models.

  • Developers

  • Authors 

subApps:
  jcrBrowser:
    actions:
      generateAsset:
        label: Generate Asset
        icon: icon-import
        $type: aiOpenCreateImageAction
        populate: false
        availability:
          root: true
          writePermissionRequired: true
          rules:
            notDeleted:
              $type: jcrIsDeletedRule
              negate: true
    actionbar:
      sections:
        folder:
          groups:
            generate:
              items:
                - name: generateAsset
        root:
          groups:
            generate:
              items:
                - name: generateAsset
image io
Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the AI Accelerator module docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules