> ## 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.

# Configuring `DepictProvider`

Import the `DepictProvider` component from the installed package and use this component to wrap your entire application's component tree as shown:

```tsx theme={null}
import { DepictProvider } from "@depict-ai/react-ui";
import { en_GB } from "@depict-ai/react-ui/locales";
import { YourDisplay } from "./display-types.ts"

function App() {
  return (
    <DepictProvider<YourDisplay>
      // Wondering what your MERCHANT_ID is? Depict engineers aren't very creative here, so you can probably guess. Odds are it's your company name or an abbreviation thereof, all lower case and only a-z or 1-9. Ask us if you can't get it working.
      merchant="MERCHANT_ID"
      // Wondering what your MARKET(s) is/are? Check on demo.depict.ai
      market="MARKET"
      // The `locale` property on the `DepictProvider` wrapper accepts a JavaScript object that handles UI translations, price formatting as well as what language the backend responds with. Check what locales are available for you on demo.depict.ai, then import them from the `@depict-ai/react-ui/locales` subpackage. You can also extend them using spread.
      locale={en_GB}
      // sessionId={"USER_ID"} // <- Optionally you can override the default session id used for personalization here
    >
      <div className="App">
        ...
      </div>
    </DepictProvider>
  );
}

export default App;
```

We call the product data that you receive for each product card that you have to render `display`.

`YourDisplay` is a type definition of your specific display. Please ask Depict for this.

## Optional configuration

Beyond `merchant`, `market`, and `locale`, `DepictProvider` accepts the following options:

| Prop | Type | Purpose |
| - | - | - |
| `sessionId` | `string` | Overrides the default session id used for personalisation and tracking |
| `metaData` | `Record<string, string>` | Custom metadata sent with each request; only needed if instructed by Depict |
| `navigateFunction` | function | Hooks SDK navigation into your router; not needed in Next.js — see [routing](/react-ui-guide/setup/routing) |
| `displayTransformers` | object | Adds `page_url` and extra data to displays — see [the next step](/react-ui-guide/setup/display-transformers) |
| `search` | object | Search configuration such as `searchPagePath` — see [configuring the provider for search](/react-ui-guide/search/configuring-provider) |
| `category` | object | Category configuration; `disableOverrideListingId: true` stops a `listing_id` URL parameter from overriding the configured listing |
| `imageResizer` | `(url: string, width: number) => string` | Overrides the default image resizing CDN: the function receives the original image URL and the desired width and returns the resized image URL. By default, Depict uses Cloudflare's image resizer for non-Shopify images and Shopify's built-in resizer for Shopify CDN images |

## Customising price formatting

Price formatting is part of the `locale` object. It applies to the price filter, result counts, and prices in the search modal; prices inside your own `productCard` are formatted by you. The type and its defaults:

```ts theme={null}
type PriceFormatting = {
  pre_: string; // default: ""
  post_: string; // default: ""
  decimal_places_delimiter_: string; // default: "."
  thousands_delimiter_: string; // default: ","
  places_after_comma_: number | "auto"; // default: 2
};
```

To customise it, spread the imported locale and override `price_formatting_`:

```tsx theme={null}
import { en } from "@depict-ai/react-ui/locales";

<DepictProvider
  merchant="MERCHANT_ID"
  market="MARKET"
  locale={{
    ...en,
    price_formatting_: {
      pre_: "",
      post_: "kr",
      decimal_places_delimiter_: ",",
      thousands_delimiter_: " ",
      places_after_comma_: "auto",
    },
  }}
>
  ...
</DepictProvider>
```

## Limits and behavior

* Mount exactly one `DepictProvider` per page — a second mounted instance throws an error. To use Depict on multiple routes, mount the provider once at the top of your component tree.
* Multiple `SearchPage` or `CategoryPage` instances on the same page are supported, but each needs a unique `stateKey` prop (for example `"1"`, `"2"`, …) so their URL and history state stay separate; a duplicate `stateKey` throws. Set the same `stateKey` on a `BreadCrumbs`/`QuickLinks` component to associate it with a specific `CategoryPage`.
* `locale` is required and must be a locale object imported from `@depict-ai/react-ui/locales`, not a string.

<Note>
  Review the types or the [reference](/reference/search-sdk/search-react-sdk#the-depictprovider-component) to see what you can configure on DepictProvider.
</Note>

<Tip>If you're seeing a type error after providing YourDisplay, don't fret and go to the next step</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.