Generate Content Templates with AI

Overview

Content Template allows users to create consistent ways to display content from their content types and other entity types. Creating content templates can be a tedious process, and it would be great if the AI could be able to help with that.

Proposed resolution

We need to:

1. Make sure that AI is able to modify the Content Templates similar to pages and that it has sufficient context on what the content type is for (i.e. name, description, fields)
2. Make sure that AI is able to do dynamic prop source mappings, i.e. select where to display fields from the content type

Implementation details

A new agent, Drupal Canvas Content Template Builder Agent, has been added.

Creating a content template involves adding a component to the template and linking its props to the supported content type fields (e.g., Article Image → Media → Image → Title). This linking is handled by the thunk _updateExistingComponentValuesForLinking, which requires the component UUID, prop name, and field expression (e.g., for Title it will be ℹ︎␜entity:node:article␝title␞␟value).

A new service CanvasAiContentTemplateHelper has been created which has the following helper methods:

• CanvasAiContentTemplateHelper::getFieldSuggestions(): Accepts entity type, entity ID, and component ID as arguments and returns the possible linking options for each prop using the PropSourceSuggester service

heading:
  - Title
text:
  - 'Body → Processed text'
  - 'Body → Processed summary'
image:
  - 'Authored by → User → Picture'
  - 'Article Image → Image → Image'
  - 'Article Image → Image → Revision user'
  - 'Article Image → Image → Thumbnail'
  - 'Article Image → Image → Authored by'
  - 'Revision user → User → Picture'

A new tool get_prop_source_suggestions has been created which utilizes this method so that the AI agent can check possible linking options in a component.

• CanvasAiContentTemplateHelper::getLinkableFields(): accepts an entity type and bundle as arguments. It loops through all available components and returns the unique linkable fields and their expressions in the following format:

'Body → Processed summary': 'ℹ︎␜entity:node:page␝body␞␟summary_processed'
'Body → Processed text': 'ℹ︎␜entity:node:page␝body␞␟processed'
Published: 'ℹ︎␜entity:node:page␝status␞␟value'
Title: 'ℹ︎␜entity:node:page␝title␞␟value'

This helper is the used by the tool get_linkable_fields and this tool is provided to the agent as the default information tool so that it knows the linkable fields in the content type upfront.

The agent generates the content template structure in the following YAML format:

operations:
  ADD:
    - target: content
      placement: inside/above/below
      components:
        - sdc.theme_name.two_column_layout:
            props:
              ratio: "50-50"
            slots:
              left:
                - sdc.theme_name.event_card:
                    props:
                      style: "default"
                      start_date: "August 15, 2024"
                      end_date: "August 20, 2024"
                      title: "Exciting Event Title"
                      venue: "Event Venue Name"
                    maps:
                      title: Title
                      start_date: Start date
                      end_date: End date
                      venue: Venue

                - sdc.theme_name.cta:
                    props:
                      text: "Register for this event"
                    slots:
                      action:
                        - sdc.theme_name.button:
                            props:
                              variant: "primary"
                              label: "Register Now"
                              url: "https://example.com"
                            maps:
                              label: Register link → Link text
                              url: Register link → Link URL

              right:
                - sdc.theme_name.image:
                    props:
                      image:
                        src: /themes/contrib/demo/components/banner/assets/277628-911758.jpg
                        alt: "A good dog"
                        width: 601
                        height: 402
                    maps:
                      image: Image

                - sdc.theme_name.text:
                    props:
                      text: "The text goes here."
                    maps:
                      text: Image → Alternative text

        - sdc.theme_name.text:
            props:
              text: "The text goes here."
            maps:
              text: Body → Processed text

This is similar to the YAML structure generated by the Page Builder Agent, with an additional maps key that indicates the prop-to-field linking.
The agent passes this yml to process_yaml_operations tool. It

1. Validates the YAML structure, components, and mappings
2. Reuses the CanvasAiPageBuilderHelper::customYamlToArrayMapper method and generates nodePaths for each component, which are required to place them in the UI
3. Converts labels such as Body → Processed text into expressions (ℹ︎␜entity:node:page␝body␞␟processed), which are required by the thunk _updateExistingComponentValuesForLinking.

Using the agent

1. Create a page for the content type that you want to build the content template
2. Open the content template UI in canvas
3. Ask the agent to 'Create a conytent template'

Demo: See comment #6

User interface changes

AI usage

The code associated with this issue was developed using AI tools and was reviewed and tested by me