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/generative-experiences-api-client@2.2.1
# for the JavaScript UI library
npm install @algolia/generative-experiences-js@2.2.1
# for the React UI library
npm install @algolia/generative-experiences-react@2.2.1

Without a package manager (CommonJS)

// API Client
<scriptsrc="https://cdn.jsdelivr.net/npm/@algolia/generative-experiences-api-client@2.2.1/dist/index.umd.js"></script><script>const{ createClient }=window['@algolia/generative-experiences-api-client'];constclient=createClient({appId: 'YourApplicationID',indexName: 'YourIndexName',searchOnlyAPIKey: 'YourSearchOnlyAPIKey',writeAPIKey: 'YourWriteAPIKey',// (optional) only needed for dynamic generation});</script>
// JavaScript UI library
<scriptsrc="https://cdn.jsdelivr.net/npm/@algolia/generative-experiences-js@2.2.1/dist/index.umd.js"></script><script>constgenerativeExperiences=window['@algolia/generative-experiences-js'];generativeExperiences.guidesHeadlines({client: client,container: '#headlines',userToken: 'MyUserToken',category: 'category',});</script>

Usage

Example with React

Displaying a guide:

importReactfrom'react';import{createClient}from'@algolia/generative-experiences-api-client';import{GuideContent}from'@algolia/generative-experiences-react';constoptions={appId: 'YourApplicationID',indexName: 'YourIndexName',searchOnlyAPIKey: 'YourSearchOnlyAPIKey',};constclient=createClient(options);functionApp({ currentObjectID, userToken }){// ...return(<GuideContentclient={client}showFeedbackuserToken={userToken}objectID={currentObjectID}onlyPublisheditemComponent={({ 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';constcommerceClient=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.