Book a demo

Building a search UI

Use the Athena XAI Headless package to add autocomplete, visual search, filters and sorting to your front end.

Last updated

On this page

Athena XAI Headless

Use the Athena XAI Headless project to add a complete search experience to your site. It is a customizable script for an efficient search system, and it works across platforms and frameworks with minimal adjustments.

It supports:

  • Autocomplete
  • Visual similarity search
  • Infinite scroll
  • Pagination
  • Filters
  • Sorters
  • Configurable functionalities

The script is built primarily in JavaScript and relies on few third-party libraries, such as Cropper.js and OMRangeSlider.js, to keep the code clean and organized.

Configure and integrate

  1. Set your access and website tokens in Proxy/config.php, alongside the API URL from the dashboard.
  2. Copy the HTML content into your project.
  3. Make sure the script tags are placed correctly and have the type=module attribute.
  4. Customize the configuration in the athenaConfig object in js/global/athena-config.js to match your project.

Install

TEXT
npm install athena-x-ai-headless-proxyless

###installation steps

- make sure you have node js installed
- run npm command
- locate the athena-x-ai folder located in node_modules
- locate example folder inside athena-x-ai folder structure
- copy the folder structure inside your project
- in index.js file import athena-x-ai.js from node_modules dist folder
- set configuration based on your preference
- enjoy Athena X Ai!