> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript API client

> Install the Depict UI package, import the recommendations client, and fetch recommendations for a page, a product or a set of products.

The JavaScript API client wraps `POST /v3/recommend/products` so you don't build the request yourself. It ships inside the Depict UI packages.

## Install

<CodeGroup>
  ```shell NPM (React) theme={null}
  npm i @depict-ai/react-ui
  ```

  ```shell Yarn (React) theme={null}
  yarn add @depict-ai/react-ui
  ```

  ```shell NPM (JS) theme={null}
  npm i @depict-ai/js-ui
  ```

  ```shell Yarn (JS) theme={null}
  yarn add @depict-ai/js-ui
  ```
</CodeGroup>

## Import

Add the import at the top of the file where you fetch recommendations:

<CodeGroup>
  ```typescript js-ui theme={null}
  import { fetchDepictRecommendations } from "@depict-ai/js-ui";
  ```

  ```typescript react-ui theme={null}
  import { useFetchRecommendations } from "@depict-ai/react-ui";

  // In the component that needs recommendations:
  const { fetchRecommendations } = useFetchRecommendations();
  // `merchant` and `market` are taken from the DepictProvider, so you don't
  // pass them to this `fetchRecommendations`.
  ```
</CodeGroup>

## Fetch recommendations

`fetchDepictRecommendations` takes an options object and returns a promise of an array of displays (product data). Every option is listed in the [reference](/reference/recommendations-sdk/recommendations-sdk-api-wrapper).

<Info>Where to find your merchant and market ids: see [Set up DPC](/api-guide/tracking/setup#merchant-and-market-ids).</Info>
<Tip>For a list of possible types, try checking the [preview browser](https://demo.depict.ai/null/null/recommendations?headers=%7B%22force-new-displays%22%3A%221%22%7D) or ask your Depict contact. Usually the available types are also detailed in the kickoff slides. If you get a response whose `error` says the `(tenant, market, type)` combination is not yet configured, that means a type isn't available for you - let us know if you want it. (The exact message text uses the v2 vocabulary `tenant` and may change.)</Tip>

| Use case                                                                             | Extra option | Example                                   |
| ------------------------------------------------------------------------------------ | ------------ | ----------------------------------------- |
| General recommendations for a page type, most often the front page                   | none         | `type: "front_page"`                      |
| Recommendations for one product, for example below the description on a product page | `productId`  | `productId: "this-is-an-amazing-product"` |
| Recommendations for several products, for example everything in the cart             | `productIds` | `productIds: ["product-1", "product-2"]`  |

```typescript TypeScript theme={null}
import { fetchDepictRecommendations } from "@depict-ai/js-ui";

const frontPageRecs = await fetchDepictRecommendations({
    merchant: "MERCHANT_ID",
    market: "MARKET",
    locale: "en_GB", // See demo.depict.ai for available locales
    type: "TYPE",
});

const productPageRecs = await fetchDepictRecommendations({
    merchant: "MERCHANT_ID",
    market: "MARKET",
    locale: "en_GB",
    type: "TYPE",
    productId: "this-is-an-amazing-product",
});

const cartRecs = await fetchDepictRecommendations({
    merchant: "MERCHANT_ID",
    market: "MARKET",
    locale: "en_GB",
    type: "TYPE",
    productIds: ["product-1", "product-2", "product-3"],
});
```

That's it for fetching. Render the displays with your own product card, then follow the [tracking guide](/api-guide/tracking/introduction) so clicks and purchases are attributed to the recommendations.