> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> A guide for React/Next.js/Gatsby users to integrate with the Depict UI

<Note>This guide covers v4, the current major version of the Depict UI. See the [migration guide](/other-guides/sdk-migration-v3-v4) if you're upgrading from v3.</Note>

<Info>The Depict UI SDK is actively maintained — including recent accessibility improvements. See the [depict-ui changelog on GitHub](https://github.com/depict-org/depict-ui/commits/main/).</Info>

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.

<Tip>Remember to follow the [tracking](/react-ui-guide/tracking/introduction) guide</Tip>

<Info>
  Are you looking for the [reference](/reference/search-sdk/search-react-sdk)?
</Info>

## 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](https://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](/api-guide/introduction) 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.

| Action | How |
| - | - |
| Show SDK event logs in the browser console | Run `localStorage.debug = true` in the console, then reload |
| Disable error reporting to Depict | Set the environment variable `DEPICT_ERROR_REPORTING=false` (or `NEXT_PUBLIC_DEPICT_ERROR_REPORTING=false` in Next.js) at build time |

<Note>Enabling the debug flag also disables error reporting to Depict for that browser.</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.