Search Ai

Description

The AEM Search AI is a dynamic component that integrate the AEM with enterprise search data and large language models. It receives content/props from an AEM Sling Model and uses Elasticsearch data to generate the answers. The component sends the request to an external AI service hosted on Azure Container which generates a structured response containing title, description, html content, referenceImage and referenceURL.

SearchAiProperties

Prop	Type	Description	Optional
mostSearched	string[]	List of predefined search prompts displayed as quick suggestions for users.	✅
title	string	Title displayed at the top of the component.	✅
text	string	Default text displayed inside the input to guide the user before typing.	✅
searchHint	string	Helper test displayed below the search input to suggest what users can type.	✅
loadingMessage	string	Message displayed while the system is generating or retrieving the answer.	✅
brand	Brand	Brand: e.g., Lexus, Toyota	❌
root	string	The homepage for the current country used as the base context for the component. The Search AI endpoint provides content based on this root.	❌

Search Ai Examples

import { SearchAi } from '@tmedxp/aem-react-components';

const SearchAiExample = () => (
  <SearchAi
    mostSearched={[
      'Can I have a full check-up done on my car?',
      'Where can I request a drive test?',
      'Can I convert my car into a hybrid?',
    ]}
    title="Can we help you search anything?"
    text="Please enter your search query"
    searchHint="Not sure what to type? Start with a keyword."
    loadingMessage="Loading your answer"
    brand="Lexus"
    root="content/toyota/sweden/sv"
  />
);

export { SearchAiExample };

Additional Resources

• Storybook: View in Storybook

Figma

https://www.figma.com/design/sDirQcc6N0OyrYJQzdVYfM/04-Modules?node-id=10250-108039&t=AgtVVSkweMaq2CJf-0