Implementing AI Answers

Search UI

AI Answers provides you with AI-generated answers based on your indexed content. This tutorial explains how to implement AI Answers on your website.

Example of AI Answers user interface showing a search field and AI-generated answer.

AI Answers displays only AI-generated answers. For a complete search experience, consider combining the conventional search results alongside AI Answers. You can use a standard search form on your main pages to direct users to a results page displaying both AI-generated answers and conventional search results.

Please note that implementing AI Answers requires familiarity with HTML and JavaScript, and an AddSearch account.

1. Include the dependencies

First, include the latest versions of the AddSearch JavaScript Client, Search UI Library, and optionally the CSS in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/addsearch-js-client@1.0/dist/addsearch-js-client.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.9/dist/addsearch-search-ui.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.9/dist/addsearch-search-ui.min.css" />

Visit the Search UI Library repository and the AddSearch Search API Client for JavaScript repository on GitHub to ensure you’re including the latest versions. The latest CSS version corresponds to the latest Search UI Library version.

2. Create the containers

Add container elements for the Search Field and AI Answers components:

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

The ids you choose here will be used in the components’ settings to specify where the component should be rendered.

3. Create the instances

Initialize the AddSearch JavaScript Client and Search UI Library instances:

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

// Search UI instance (set hasAiAnswers to true in options)
const addSearchUi = new AddSearchUI(addSearchClient, { hasAiAnswers: true });

You can find your public site key from the Keys and Installation page under Setup in the AddSearch dashboard.

4. Create the components

Set up the searchField and aiAnswersResult components:

// Instantiate Search Field
addSearchUi.searchField({
    containerId: 'searchfield-container',
    placeholder: 'Type your question',
    button: 'Go'
});

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

The searchField component is required for rendering the input field for questions, while the aiAnswersResult component is used to display the AI-generated answers. Please ensure that the containerId in each component matches its corresponding container id.

5. Start the Search UI

After setting the component, start the Search UI:

addSearchUi.start();

When the Search UI is started, the components are rendered in the container elements.

6. Customize the appearance (optional)

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

#ai-answers-result-container {
  margin-top: 24px;
}

Complete example

After implementing all the steps, your HTML file should look like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>AddSearch AI Answers</title>
    <script src="https://cdn.jsdelivr.net/npm/addsearch-js-client@1.0/dist/addsearch-js-client.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.9/dist/addsearch-search-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.9/dist/addsearch-search-ui.min.css" />
</head>

<body>

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

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

        // Search UI instance (set hasAiAnswers to true in options)
        const addSearchUi = new AddSearchUI(addSearchClient, { hasAiAnswers: true });

        // Instantiate Search Field
        addSearchUi.searchField({
            containerId: 'searchfield-container',
            placeholder: 'Type your question',
            button: 'Go'
        });

        // Instantiate AI Answers Search UI
        addSearchUi.aiAnswersResult({
            containerId: 'ai-answers-result-container',
            mainHeadlineText: 'AI-generated answer',
            answerMaxHeight: 150,
            sourcesHeadlineText: 'Based on the following sources:',
            hasHideToggle: false
        });
        // Start search UI
        addSearchUi.start();
    </script>

</body>

</html>

Troubleshooting

  • Ensure your library versions are 0.9 or higher
  • Verify the containerId matches exactly in HTML and JavaScript
  • Check that hasAiAnswers: true is set in the UI instance

Was this helpful?

Need more help?

We’re always happy to help with code or other questions you might have. Search our documentation, contact support, or connect with our sales team.