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

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.

References to content apps

References feature is available from version 1.1.1 and is currently in the state of a developer preview. 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:

${ref:<workspaceName>:<variable name>.<jcr property name>} (1)

1	Example: `${ref:personas:Person.jcrName}`

Developers
Authors

To activate the prompt picker feature:

Go to the <light-module-folder>/<light-module-name>/dialogs/pages/<dialog>.yaml file in your project.
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.

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:

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

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: openai-automations: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: openai-automations: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: openai-automations: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.

AI powered `textField`

AI-powered text fields are 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.

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

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.

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.

words

optional, default is `50`

Defines the maximum words returned.

rows

optional, default is `2`

Defines the initial height of the textarea.

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.

AI powered component generation

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

Developers
Authors

To activate the feature:

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

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: openai-automations: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: openai-automations: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.

AI powered variant generation

Generate personalized content variants.

Developers
Authors

To activate the feature:

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

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: openai-automations: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.

AI powered stories 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:

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

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: openai-automations: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.

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:

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

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.

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:

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

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.

AI assisted text fields

AI-assisted text fields are available from version 1.1.1.

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.

There are two options to enable aiAssistedTextField in your forms.

Single aiAssistedTextField
textField to 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
    #....

<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
    description:
      $type: textField
      label: Description
    #....

1	Using `implementationClass: info.magnolia.ai.automations.ui.AiAssistedFormView` converts all traditional `textField` fields to `aiAssistedTextField` fields.

1	Ensure you have the `info.magnolia.ui.javascript.form.FormViewWithChangeListener` implementation class.
2	The prompt picker.

Features

AI prompts engineering (Hyper Prompt)

DALL-E integration

AI powered textField

AI powered component generation

AI powered variant generation

AI powered stories generation

AI powered SEO Metadata Field

AI powered page generation

AI assisted text fields

Location

Main doc sections

AI powered `textField`