If you’ve already implemented Search Results Page on your website, you can add AI Answers alongside it to provide your users with AI-generated answers based on your indexed content.

This tutorial explains how to add AI Answers to your existing search implementation.

Adding AI Answers to Search Results Page

Adding AI Answers to an existing Search Results Page contains the following steps:

1. Updating library versions
2. Adding the container
3. Configuring AI Answers
4. Adding the component
5. Customizing appearance (optional)

1. Update library versions

To make sure AI Answers works, ensure your major versions meet these minimum requirements:

• JavaScript Client: version 1.0 or higher
• Search UI Library: version 0.9 or higher
• Search UI CSS: version matching your Search UI Library

Visit the Search UI Library repository and the AddSearch Search API Client for JavaScript repository on GitHub for more information on the latest versions.

2. Add the container

To display AI Answers, add its container alongside your existing containers:

<!-- Add this container among your existing containers -->
<div id="ai-answers-result-container"></div>

The id you choose here will be used in the AI Answers component settings to specify where the component should be rendered.

3. Configure AI Answers

Add configuration setting { hasAiAnswers: true } to the Search UI Library instance to enable AI Answers:

// Client Instance
const addSearchClient = new AddSearchClient('YOUR_PUBLIC_SITE_KEY');

// Add 'hasAiAnswers: true' setting to enable AI Answers
const conf = {
    hasAiAnswers: true
}

// Add configuration object 'conf' to Search UI instance
const addSearchUi = new AddSearchUI(addSearchClient, conf);

Note: If you already have a configuration, add the hasAiAnswers setting to your existing Search UI configuration while maintaining your current settings.

4. Add AI Answers component

Add the aiAnswersResult component:

// Instantiate AI Answers UI (place among your existing components)
addSearchUi.aiAnswersResult({
    containerId: 'ai-answers-result-container',
    mainHeadlineText: 'AI-generated answer',
    answerMaxHeight: 150,
    sourcesHeadlineText: 'Based on the following sources:',
    hasHideToggle: true
});

The aiAnswersResult component displays the AI-generated answers in the container element. Please ensure that the containerId matches its corresponding container id.

5. Customize the appearance (optional)

You can customize the appearance of the AI Answers using CSS:

/* Use the corresponding container id as the selector */
#ai-answers-result-container {
    margin-top: 24px;
}

Troubleshooting

• Ensure your library versions meet the minimum requirements (JavaScript Client 1.0+, Search UI Library and CSS 0.9+)
• Verify the containerId matches exactly in HTML and JavaScript
• Check that hasAiAnswers: true is set in the UI instance configuration
• If AI Answers doesn’t appear, ensure you’ve added the container before your search results container