---
title: Build your recommendation interface
slug: o8880413
canonical_url: https://docs.coveo.com/en/o8880413/
collection: coveo-for-commerce
source_format: adoc
---
# Build your recommendation interface
After creating a [recommendation slot configuration](https://docs.coveo.com/en/o8880463/), [use the endpoint](https://docs.coveo.com/en/103#tag/Recommendations) to retrieve items for your recommendation slots.

## Approaches to building your recommendation interface

There are [several approaches](https://docs.coveo.com/en/o6q90192/) to building your search interface.
For more detailed guides, see the following:

* [Coveo Headless (client-side rendering)](https://docs.coveo.com/en/p25a3501/)

* [Coveo Headless (server-side rendering)](https://docs.coveo.com/en/p25b0248/)

## Recommendations based on configured strategy

While creating the [recommendation slot configuration](https://docs.coveo.com/en/o8880463/), you can specify a `seedType` to determine the strategy used to seed the recommendations.
Seed types can have the following values:

* `unseeded`
* `product`
* `cart`
* `purchased`

The following sections describe how to fetch recommendations using Headless, based on the `seedType` used in the recommendation configuration.

### Unseeded

If the `seedType` for your configuration is `unseeded`, you can pass just the `slotId` when defining the `Recommendations` controller (see documentation for [CSR](https://docs.coveo.com/en/p25a3501#initialize-the-controller) or [SSR](https://docs.coveo.com/en/p25b0248#define-and-retrieve-the-target-recommendation-controller-hooks)).

### Product

If the `seedType` for your configuration is `product`, you must pass an additional product ID to the options object to seed the recommendations with a specific product.

In a CSR context, pass the `productId` to the `options` object when initializing the `Recommendations` controller:

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

const recommendationsController = buildRecommendations(engine, {
  options: {
    slotId: '<SLOT_ID>',
    productId: '<PRODUCT_ID>',
  },
});
```

In a SSR context, pass the `productId` dynamically to the target controller when fetching the static state:

```tsx
// ...
const recsStaticState = await recommendationEngineDefinition.fetchStaticState(
  {
    controllers: {
      viewedTogether: {enabled: true, productId: params.productId},
      // ...
    },
  }
);
```

For an example, see the [Headless repository](https://github.com/coveo/ui-kit/tree/main/samples/headless-ssr/commerce-nextjs/app/products/%5BproductId%5D/page.tsx#L52).

### Cart

If the `seedType` for your configuration is `cart`, you only need to provide the `slotId` when defining your recommendation controller (see documentation for [CSR](https://docs.coveo.com/en/p25a3501#initialize-the-controller) or [SSR](https://docs.coveo.com/en/p25b0248#define-and-retrieve-the-target-recommendation-controller-hooks)).

Properly managing the cart state with Headless is essential to ensure that recommendation requests include the correct cart content (see documentation for [CSR](https://docs.coveo.com/en/o7v87042/) or [SSR](https://docs.coveo.com/en/oc685394/)).
This will ensure that recommendation requests include the correct cart content.

You can verify this by checking that the Headless recommendation request to the Commerce API contains the correct cart content in the `context.cart` object.

### Purchased

If the `seedType` for your configuration is `purchased`, you can pass just the `slotId` when defining your recommendation controller (see documentation for [CSR](https://docs.coveo.com/en/p25a3501#initialize-the-controller) or [SSR](https://docs.coveo.com/en/p25b0248#define-and-retrieve-the-target-recommendation-controller-hooks)).

Call the `purchase` method on the `cart` controller when you use Headless to ensure recommendation requests reflect the correct history of purchased products (see documentation for [CSR](https://docs.coveo.com/en/o7v87042/) or [SSR](https://docs.coveo.com/en/oc685394/)).

You can verify this by checking that the Headless recommendation request to the Commerce API contains the correct purchase history in the `context.purchased` object.