# Add Algolia enhancer

> Activate Algolia enhancers so your front-end application can interpret the the Algolia parameter values returned from Canvas.

Source: https://docs.uniform.app/docs/integrations/search/algolia/algolia-classic/add-algolia-enhancer

Before your front-end application can interpret the Algolia parameter values returned from Canvas, you must complete this one-time activation of Algolia enhancers into your app.

> If you aren't familiar with the concept of enhancers, please check out [this section about enhancers](https://docs.uniform.app/docs/guides/composition/glossary#enhancer).
> To start with a pre-configured Next.js app already wired up to an Algolia enhancer, please use the [following example](https://github.com/uniformdev/examples/tree/main/examples/algolia-starter):

```bash
git clone https://github.com/uniformdev/examples.git
cd /examples/examples/algolia-starter
```

## Add enhancer to your app

1. Add the following npm packages to your front-end application:

   ```bash
   npm install @uniformdev/canvas
   npm install @uniformdev/canvas-algolia
   ```
2. In a text editor, open the file where you retrieve the
   composition definition from Uniform.

   You are looking for the code calls the async function
   `getComposition`. The code below assumes the
   object returned is set in a variable `composition`.
3. Add the following import statements:

   ```javascript
   // general enhancer plumbing
   import { EnhancerBuilder, enhance } from '@uniformdev/canvas';

   // Algolia specific imports
   import { 
       createEnhancer,
       ALGOLIA_PARAMETER_TYPES,
       AlgoliaClient,
   } from '@uniformdev/canvas-algolia';
   ```
4. Add the following code:

   ```javascript
   const algoliaClient = new AlgoliaClient({
     applicationId: process.env.ALGOLIA_APPLICATION_ID,
     searchKey: process.env.ALGOLIA_API_KEY,
   });
   ```

   > **About this step:**
   >
   > We recommend moving the Algolia credentials to
   > environment variables rather than hard coding them
   > in the front-end app.
5. Add the following code:

   ```javascript
   const algoliaEnhancer = createEnhancer({ 
     clients: algoliaClient
   });
   ```
6. Add the following code before your return your composition:

   ```javascript
    await enhance({
      composition,
      enhancers: new EnhancerBuilder().parameterType(ALGOLIA_PARAMETER_TYPES, algoliaEnhancer),
      context: {},
    });
   ```

> **Success!:**
>
> That's it! Your app is able to enhance both Algolia parameter values and return real data from the Algolia index. Your components now should receive the expected data from Algolia.