Skip to main content
This guide covers v4, the current major version of the Depict UI. See the migration guide if you’re upgrading from v3.
The Depict UI SDK is actively maintained — including recent accessibility improvements. See the depict-ui changelog on GitHub.
We will guide you through your integration with the Depict UI, enabling you to offer a high-quality user experience with a swift integration. Currently, you can integrate all three products with Depict UI (React):
  1. Search
  2. Product Listing Pages
  3. Recommendations
If you’re only integrating one of them, skip the section that doesn’t apply to you. The “setup” section applies to all.
Remember to follow the tracking guide
Are you looking for the reference?

​
What the SDK is — and is not

The SDK (@depict-ai/react-ui) is open source under the MIT license at github.com/depict-org/depict-ui. It is the fastest way to get a Depict search, product listing, and recommendations UI live: you bring your product card component and styling variables, and the SDK renders the rest. Depict maintains the published packages and ships fixes, but does not build merchant-specific features into them. The supported customisation surface is the documented props (product card, content blocks, layout, SCSS variables, and similar). If you need behaviour beyond that, fork the repository and adjust it — the rendering core lives in browser-tags-v2/packages/ui, which react-ui wraps. If deep customisation of search, listing, or recommendation UIs is central to your project, integrate against the Platform API instead and build your own UI.

​
Debugging and error reporting

The SDK reports its internal errors to Depict automatically and suppresses its own log output in the browser by default.
Enabling the debug flag also disables error reporting to Depict for that browser.