> ## 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 the search provider

Import the `DepictSearchProvider` component from the installed package and create an instance of DepictSearchProvider:

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

const searchProvider = new DepictSearchProvider<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 full path where your search page is located, after any redirects.
  searchPagePath: "PATH_TO_SEARCH_PAGE",
  // 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/js-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
});
```

## Optional configuration

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

| Option | 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 |
| `urlParamName` | `string` | Name of the search query URL parameter; defaults to `"query"` |
| `uniqueInstanceKeyForState` | `string` | Required when creating more than one `DepictSearchProvider` on the same page — see Limits and behavior below |
| `displayTransformers` | object | Adds `page_url` and extra data to displays — see [display transformers](/js-ui-guide/search/display-transformers) |
| `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_`:

```ts theme={null}
import { DepictSearchProvider } from "@depict-ai/js-ui";
import { en } from "@depict-ai/js-ui/locales";

const searchProvider = new DepictSearchProvider({
  merchant: "MERCHANT_ID",
  market: "MARKET",
  searchPagePath: "PATH_TO_SEARCH_PAGE",
  locale: {
    ...en,
    price_formatting_: {
      pre_: "",
      post_: "kr",
      decimal_places_delimiter_: ",",
      thousands_delimiter_: " ",
      places_after_comma_: "auto",
    },
  },
});
```

## Fetching search results without the UI

To use Depict search results in your own UI — for example a custom autocomplete — call `fetchSearchResults` on the provider instead of rendering the SDK's components:

```ts theme={null}
const displays = await searchProvider.fetchSearchResults(
  "query", // the search query
  undefined, // optional: filters to apply
  10 // optional: maximum number of results
);
```

The returned displays have your `displayTransformers` applied, so they include `page_url`.

## Limits and behavior

* You can't create more than one `DepictSearchProvider` on the same page unless you give each one a unique `uniqueInstanceKeyForState` (for example `"1"`, `"2"`, …), because instance state lives in the URL and `history.state` and would otherwise collide.

<Note>
  Review the types or the [reference](/reference/search-sdk/js-ui#depictsearchprovider-class) to see what you can configure on the `DepictSearchProvider`.
</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.