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

import { DepictCategoryProvider } from "@depict-ai/js-ui";
import { en } from "@depict-ai/js-ui/locales";
import { YourDisplay } from "./display-types.ts"

const categoryProvider = new DepictCategoryProvider<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 ID of the category you want to display.
  categoryId: "CATEGORY_ID",
  // 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.
Wondering what’s accepted as categoryId? Enter your merchant and market in the preview browser and you can see them in the dropdown

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