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

import { DepictSearchProvider } from "@depict-ai/js-ui";
import { en } 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? Ask a depict engineer or try something like `se-sv`, `se-sv_SE` or `se`.
  market: "MARKET",
  // The full path where your search page is located, after any redirects.
  searchPagePath: "PATH_TO_SEARCH_PAGE",
  // The `locale` property accepts a JavaScript object that handles UI translations and price/number formatting. Import our supported locales from the `@depict-ai/js-ui/locales` subpackage, extend them or write your own.
  locale: en,
  // userId: "USER_ID", // <- if users are logged in, and you have a user id for them, provide it here. Otherwise, omit this property.

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