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

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 (
      // 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.
      // Wondering what your MARKET(s) is/are? Check on
      // 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, then import them from the `@depict-ai/react-ui/locales` subpackage. You can also extend them using spread.
      // sessionId={"USER_ID"} // <- Optionally you can override the default session id used for personalization here
      <div className="App">

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.

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