Implement Recommend API

[Baroshem]

Introduction

Algolia is not just the Search service. It also provides useful Recommend API that could be also implemented into the Algolia module.

This would require importing another library optionally and composables like useRecommend that would be used fetch the recommendations based on previous search or a certain object. More info in the documentation

If accepted, this will probably be released with 0.8.0 version.

Implementation

First add a recommend flag to config:

// nuxt.config.js

{
    buildModules: [
        "@nuxtjs/algolia",
    ],
    algolia: {
        apiKey: "<YOUR_SEARCH_API_KEY>",
        applicationId: "<YOUR_APPLICATION_ID>",
        recommend: true
    }
}

This will load the @algolia/recommend package and useRecommend composable. Next, use new composable in the template.

<script setup>
const { result, get } = useRecommend("test_index"); // pass your index as param

onMounted(async () => {
  await get({ objectID: "fe1232awe1", model: "bought-together"});
});
</script>

More advanced example with full options

<script setup>
const { result, get } = useRecommend("test_index"); // pass your index as param

onMounted(async () => {
  await get({ objectID: "fe1232awe1", model: "bought-together || related-products", options?: { 
     maxRecommendations: 100,
     threshold: 50 // by default,
     fallbackParameters: {},  // from Algolia
     queryParameters: {} // from Algolia
 } });
});
</script>

A fully typed response will be returned to the user like following:

{
  "results": [
    {
      "hits": [
        {
          "_highlightResult": {
            "category": {
              "matchLevel": "none",
              "matchedWords": [],
              "value": "Men - T-Shirts"
            },
            "image_link": {
              "matchLevel": "none",
              "matchedWords": [],
              "value": "https://example.org/image/D05927-8161-111-F01.jpg"
            },
            "name": {
              "matchLevel": "none",
              "matchedWords": [],
              "value": "Jirgi Half-Zip T-Shirt"
            }
          },
          "_score": 32.72,
          "category": "Men - T-Shirts",
          "image_link": "https://example.org/image/D05927-8161-111-F01.jpg",
          "name": "Jirgi Half-Zip T-Shirt",
          "objectID": "D05927-8161-111",
          "position": 105,
          "url": "men/t-shirts/d05927-8161-111"
        }
      ],
      "processingTimeMS": 1,
    }
  ]
}

Documentation

Apart from the feature itself, a new documentation page would be required as this feature contains new configuration option, new composable, new api and a new vue-instantsearch components to be used for recommendation.

[Haroenv]

Very cool! Our UI components are also compatible with Vue 3, like autocomplete by using https://github.com/algolia/recommend/tree/next/packages/recommend-vdom

[Baroshem]

@yassilah waiting for your comments ;)

Also, maybe @pi0 @danielroe @atinux you would have some thoughts on that? :)

[yassilah]

I think that'd be great and if we can also add the UI components for it that would really make using it super easy. I haven't used the Recommend API though so I can't really comment on the usability of the one you're suggesting but i'll take a look 🙂

[danielroe]

Feels like a great idea 👍. Could register the components with components module too.

[Baroshem]

Is the naming ok for you? I mean the naming of the composable, get method, result, etc? I tried to make it similar to the current useSearch composable.

[danielroe]

I'd suggest useAlgoliaRecommend - in general namespacing composables will be key as the auto-import strategy is adopted more and more.

[Baroshem]

I see, however this would require renaming other composables as well. But this composable can be the first to introduce this approach

[jojva]

Hi @Baroshem,
I am the main engineer working on the backend/API of Recommend at Algolia. First of all, thanks for your work!
I would suggest making objectID part of the options. We are in the process of releasing more AI models that will not need an objectID and will instead require other new parameters (aka "options").
Unfortunately I am not sure I can disclose these new models or parameters at the moment, but rest assured we will let you know once we make the release public.
Feel free to ask questions, I'll try to answer the best I can.
Best, Joris

[Baroshem]

Hi @jojva

Sorry for no contact from my side. Completely missed your message. Thanks for these recommendations!

I will include them in the plan to release a support for recommend API for the module.

Let me know when you will have some info on the new structure of the recommend API.

[jojva]

Hi @Baroshem, I just wanted to let you know that the new trending model family has been released, you can check the API here: https://www.algolia.com/doc/rest-api/recommend.
Don't hesitate if you have any questions.
Best, Joris

[Baroshem]

Hey @jojva

Thanks for the information! I will check if the recommend api now still works as expected, and let you know!

[Baroshem]

I think thanks to your previous recommendation, now I dont have to make any changes as it was already included here https://github.com/nuxt-community/algolia-module/blob/d97e8c2a2761563dac27f77b4bb14cc7c6d710be/src/runtime/composables/useAlgoliaRecommend.ts#L1

[Baroshem]

Hey guys, the support for Recommend API is now part of the new version of the module -> https://github.com/nuxt-community/algolia-module/releases/tag/v0.8.3

Thanks for participating! 💚