Skip to main content

Adding AI Answers to Your Search Results Page

If you have already set up an AddSearch Search Results Page on your website, you can enhance the search experience by integrating AI Answers. AI Answers generate responses based on your indexed content and display them alongside traditional search results.

This guide explains how to add AI Answers to your existing search setup.

AI Answers shown with traditional Search Results Page

Steps to Add AI Answers​

  1. Update the AddSearch libraries to required versions
  2. Add the HTML container for AI Answers
  3. Enable AI Answers in the Search UI configuration
  4. Add and configure the AI Answers component
  5. Optionally, customize the AI Answers appearance with CSS

1. Update Library Versions​

Ensure you are using these minimum versions to support AI Answers:

  • JavaScript Client: 1.0 or higher
  • Search UI Library: 0.9 or higher
  • Search UI CSS: match the Search UI Library version

Check the latest releases here:

2. Add the Container​

Add an HTML element on your page to host the AI Answers. For example:

<div id="ai-answers-result-container"></div>

The container ID you choose here will be referenced in the AI Answers component configuration.

Place this container near your existing search results container, usually above or alongside it.

3. Configure AI Answers​

Enable AI Answers by adding hasAiAnswers: true to your Search UI configuration object when initializing the Search UI instance.

// Initialize AddSearch client
const addSearchClient = new AddSearchClient('YOUR_PUBLIC_SITE_KEY');

// Configure Search UI with AI Answers enabled
const conf = {
    hasAiAnswers: true
    // include your existing configuration properties as needed
};

// Initialize Search UI with the configuration
const addSearchUi = new AddSearchUI(addSearchClient, conf);

If you already have an existing configuration object, add hasAiAnswers: true without removing other settings.

4. Add the AI Answers Component​

Add the AI Answers component to render the AI-generated answers inside the container:

addSearchUi.aiAnswersResult({
    containerId: 'ai-answers-result-container',
    mainHeadlineText: 'AI-generated answer',
    answerMaxHeight: 150,
    sourcesHeadlineText: 'Based on the following sources:',
    hasHideToggle: true
});

Make sure containerId matches the ID of the container element you added in step 2.

5. Customize Appearance (Optional)​

You can adjust the style of the AI Answers container using CSS. For example:

#ai-answers-result-container {
    margin-top: 24px;
    /* Add other style rules as needed */
}

Place custom styles in your existing CSS files or a new stylesheet linked to your page.

Troubleshooting​

  • Verify that your library versions meet or exceed the minimum requirements.
  • Ensure the container ID in your HTML exactly matches the containerId used in the JavaScript.
  • Confirm that hasAiAnswers: true is set correctly in the Search UI configuration.
  • Make sure the AI Answers container is present before or alongside the search results container in the DOM.

If AI Answers do not display, check browser console for errors and review these steps.