Generative Answers (Frontend Theme) | Yext Hitchhikers Platform

What You’ll Learn

By the end of this unit, you will be able to:

• Define the purpose and importance of the Generative Answers component
• List and complete the three steps to implement the Generative Answers component in the Theme
• Add a custom Generative Answers card

Advanced Search Tier Feature

Generative Answers are only available on the Advanced Search tier. Check out the Search Tiers reference doc to learn more about the features that are available in each tier.

Overview

As you learned in the Generative Answers (Backend) unit, Generative Answers are AI-generated summaries of search results displayed at the top of the page. In this unit, we will walk through how to set up Generative Answers in your frontend Theme experience.

You’ll need to turn it on for the experience as a whole and then for each search results page you want to use it on, either universal or vertical search.

The main customization is adding source URL fields, which specify what Knowledge Graph fields to pull the URL links from for the sources displayed with each generated answer.

Add Generative Answers to the Frontend

You must be on Theme 1.35 or above to use Generative Answers. There are two required and one optional step to add Generative Answers to your frontend Theme experience:

1. Enable Generative Answers in the global_config.json file
   
2. Add the components to each vertical Handlebars file
   
3. (Optional) Add optional configurations in each vertical JSON file

Step 1 is done for the entire Search frontend, but you’ll have to do steps 2 and 3 for each vertical you want to add Generative Answers to. Steps 2 and 3 should be familiar as you would do them to add any component from the SDK to the Theme.

1. Enable Generative Answers

In the config > global_config.json file, comment in the useGenerativeDirectAnswers property. Make sure it is set to true.

2. Add Component to the Handlebars File

In the pages > [[page]].html.hbs file, comment in the following lines for the Generative Answers component cards, script, and markup. This will pull in the Generative Answers cards and components onto the page.

Cards

`{{> generativedirectanswercards/all }}`  

Script

`{{> templates/universal-standard/script/generativedirectanswer }}`  

Markup

`{{> templates/universal-standard/markup/generativedirectanswer }}`  

This will use the default settings for Generative Answers from the SDK.

Notice after templates is the name of the page template (in this case universal-standard). This will be filled in with whichever template the page you’re looking at is using.

3. (Optional) Add Component to the JSON File

Update the config > [[page]].json file to customize the Generative Answers component settings. All of these settings are optional and Generative Answers will appear as soon as you complete steps 1 and 2, pulling in the default configuration from the SDK.

If you want to modify any of the default settings, add the GenerativeDirectAnswer object in componentSettings in the JSON file. If this is commented out in your file, make sure to remove both the opening (/**) and closing (**/) comments.

   "GenerativeDirectAnswer": {
      "cardType": "generative-standard", // The card type to use for the generated direct answer
      "sourceUrlFields": ["website", "c_someField.url"] // The fields to use as the redirect URL for the sources
    },

Comment in and edit the componentSettings.GenerativeDirectAnswer object. The two settings you can change are:

• The cardType property specifies the Generative Answers card to use. By default, this is the built-in generative-standard card. If you want to customize the card, add a new card using the Jambo Command and update this property with the name of the custom card.
  
• The sourceUrlFields property is an array of Knowledge Graph field names to pull URLs with which to link the sources. You can list multiple fields for the Generative Answer to pull from those enabled on the entity type with content for the source entity. This allows the user to click on the source card and be linked to more information.

Add Custom Card

If you would like to change the structure of the Generative Answers card, you can add a custom card, just as you would for a result card or direct answer card. However, unlike result cards, you can’t customize field mappings, only the structure of the card.

In other words, the Generative Answer, source, and other components are returned as partials. You can customize those objects, but you can move those objects around on the card or add hardcoded text.

To add a custom Generative Answers card, navigate to Tools > Jambo Commands and select Add Generative Direct Answer (GDA) Card. Name the card something descriptive. Use the built-in generative-standard card as the template. Once you create the card, you’ll find the folder for it in the top-level generativedirectanswercards folder. Open the template.hbs file to edit the structure of the card.

Make sure to update the cardType property in the config.json files for the verticals you want to use this card.