---
title: Build recommendation interfaces (CSR)
slug: p25a3501
canonical_url: https://docs.coveo.com/en/p25a3501/
collection: coveo-for-commerce
source_format: adoc
---
# Build recommendation interfaces (CSR)
You can use the [Headless](https://docs.coveo.com/en/lcdf0493/) [`Recommendations`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Commerce.Recommendations.html) controller to retrieve recommendations.

You can also use the `Recommendations` controller and its sub-controllers to assemble recommendations interfaces in your project.

A complete example, including a sample implementation of the recommendation interface, is available in the [Headless repository](https://github.com/coveo/ui-kit/tree/master/packages/samples/headless-commerce-react/src/pages/home-page.tsx).

## Prerequisites

Before you begin building your recommendation interfaces, make sure you:

. [Understand how recommendation interfaces work](https://docs.coveo.com/en/o4ue0204/).

. [Create recommendation configurations](https://docs.coveo.com/en/o8880463/).

## Initialize the controller

Each `Recommendations` controller must point to a specific recommendation slot configuration through the `slotId`, which is defined when initializing the controller.
There can be multiple recommendation interfaces on the same page, each pointing to a different recommendation slot and thus using a different controller instance.

The `slotId` is the unique identifier of the slot you want to retrieve recommendations for.
This corresponds to the `id` field of the [recommendation slot configuration](https://docs.coveo.com/en/o8880463/) you've created.

Do the following to initialize the `Recommendations` controller:

```jsx
import { engine } from './Engine';
import {buildRecommendations} from '@coveo/headless-commerce';

const recommendationsController = buildRecommendations(engine, { <1>
    options: {slotId: 'af4fb7ba-6641-4b67-9cf9-be67e9f30174'},
});
```
<1> Create an instance of the `Recommendations` controller by passing the [previously initialized](https://docs.coveo.com/en/o6r70022#initialize-the-headless-commerce-engine) `engine` instance and the `options` object, which contains the `slotId` of the slot that you want to retrieve recommendations for.


> **Note**
>
> Depending on the `seedType` used in the [recommendation slot configuration](https://docs.coveo.com/en/o8880463#recommendation-slots), you might need to pass additional details in the `options` object.

The `Recommendations` controller provides a `refresh` method that you can call to fetch new recommendations for the slot.

## Use the controller in a component

Once the controller is initialized, it can be used in a component to display recommendations:

```jsx
import {Cart, Recommendations} from '@coveo/headless/commerce';
import {useEffect, useState} from 'react';
import ProductList from '../../product-list/product-list';
import Pagination from '../pagination/pagination';

interface IRecommendationsInterfaceProps {
  recommendationsController: Recommendations; <1>
  cartController: Cart;
  navigate: (pathName: string) => void;
}

export default function RecommendationsInterface(
  props: IRecommendationsInterfaceProps
) {
  const {recommendationsController, cartController, navigate} = props;

  const [recommendationsState, setRecommendationsState] = useState(
    recommendationsController.state
  );

  useEffect(() => { <2>
    recommendationsController.subscribe(() => {
      setRecommendationsState(recommendationsController.state);
    });
  }, [recommendationsController]);

  return (
    <div className="RecommendationsInterface">
      <h3 className="RecommendationsHeadline">
        {recommendationsState.headline} <3>
      </h3>
      <ProductList <4>
        products={recommendationsState.products}
        cartController={cartController}
        controllerBuilder={recommendationsController.interactiveProduct}
        navigate={navigate}
      />
      <Pagination controller={recommendationsController.pagination()} /> <5>
    </div>
  );
}
```
<1> Pass an instance of the `Recommendations` controller.
This controller and its sub-controllers will be used to fetch and display the recommendations.
<2> Subscribe to the controller state to update the component when the recommendations change.
<3> Display the `headline` returned by the recommendation slot.
<4> Access the current recommendations by reading the `products` field from the recommendations controller state.

This example uses a [ProductList](https://github.com/coveo/ui-kit/tree/master/packages/samples/headless-commerce-react/src/components/product-list/product-list.tsx) component to iterate through Headless products and display them.
<5> Access the [pagination sub-controller](https://docs.coveo.com/en/o7vb0270/) to display pagination controls.