Algolia Generative AI Experiences

A repository packaging the API client and UI components for Algolia Generative Experiences. For the full documentation of this feature, please check the Algolia Docs

✨ Features

• Thin & minimal low-level HTTP client to interact with Algolia's Generative Experiences API
• UI libraries for JavaScript and React templating
• UMD and ESM compatible, you can use it with any module loader
• Built with TypeScript

💡 Getting Started

The Generative Experiences project exposes 3 packages:

• @algolia/generative-experiences-api-client: minimal HTTP client to interact with the API
• @algolia/generative-experiences-js: plain JavaScript UI library with accessible components
• @algolia/generative-experiences-react: React UI library with accessible components

All of the packages comes with type definition, and are available for both browser and node environments.

With a package manager (ESModules)

# for the API Client
npm install @algolia/[email protected]
# for the JavaScript UI library
npm install @algolia/[email protected]
# for the React UI library
npm install @algolia/[email protected]

Without a package manager (CommonJS)

// API Client
<script src="https://cdn.jsdelivr.net/npm/@algolia/[email protected]/dist/index.umd.js"></script>
<script>
  const { createClient } = window['@algolia/generative-experiences-api-client'];

  const client = createClient({
    appId: 'YourApplicationID',
    indexName: 'YourIndexName',
    searchOnlyAPIKey: 'YourSearchOnlyAPIKey',
    writeAPIKey: 'YourWriteAPIKey', // (optional) only needed for dynamic generation
  });
</script>

// JavaScript UI library
<script src="https://cdn.jsdelivr.net/npm/@algolia/[email protected]/dist/index.umd.js"></script>
<script>
  const generativeExperiences = window['@algolia/generative-experiences-js'];

  generativeExperiences.guidesHeadlines({
    client: client,
    container: '#headlines',
    userToken: 'MyUserToken',
    category: 'category',
  });
</script>

Usage

Example with React

Displaying a guide:

import React from 'react';
import { createClient } from '@algolia/generative-experiences-api-client';
import { GuideContent } from '@algolia/generative-experiences-react';

const options = {
 appId: 'YourApplicationID',
 indexName: 'YourIndexName',
 searchOnlyAPIKey: 'YourSearchOnlyAPIKey',
};

const client = createClient(options);

function App({ currentObjectID, userToken }) {
 // ...
 return (
   <GuideContent
     client={client}
     showFeedback
     userToken={userToken}
     objectID={currentObjectID}
     onlyPublished
     itemComponent={({ hit }) => {
       return (<code>{JSON.stringify(hit)}</code>);
     }}
   />
 )
}

You can find more examples and implementation details in the Algolia Docs or in the React package

Example with JavaScript

Displaying a Guides:

import { createClient } from '@algolia/generative-experiences-api-client';
import { guideContent } from '@algolia/generative-experiences-js';

const commerceClient = createClient({
  appId: 'YourApplicationID',
  indexName: 'YourIndexName',
  searchOnlyAPIKey: 'YourSearchOnlyAPIKey',
});

guideContent({
  client: commerceClient,
  objectID: objectID,
  container: '#content',
  userToken: 'MyUserToken',
  showFeedback: true,
  itemComponent({ hit }) {
    return <div>{hit.title}</div>;
  },
});

You can find more examples and implementation details in the Algolia Docs or in the JavaScript package

🙋 FAQ

• Can I use Algolia Generative Experiences with another UI framework (Svelte, Vue, Lit, etc...)

Yes, you can use the API client @algolia/generative-experiences-api-client to call the service and build your UI around it. You can learn more in the Algolia Docs

• Can I use Algolia Generative Experiences with SSR (Server Side Rendering)

Yes, you can use the API client @algolia/generative-experiences-api-client and wrap any custom SSR logic around it. However, the UI libraries don't currently support SSR.

• Can I sue Algolia Generative Experiences with custom implementation? (Swift, Go, Java, Kotlin, etc..)

Currently only a JavaScript API client is provided. If want to integrate Algolia Generative Experiences using another language, please open an issue and we will consider adding it.

❓ Troubleshooting

Encountering an issue? Before reaching out to support, we recommend checking the GitHub Discussions. You can also open a Github issue.

📄 License

The project is an open-sourced software, licensed under the MIT license.