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

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
  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, 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

Review the types or the reference to see what you can configure on DepictProvider.

If you’re seeing a type error after providing YourDisplay, don’t fret and go to the next step