Product Genius for React

@productgenius/react puts Product Genius on your storefront's frontend, whichever React framework it is built with — plain React, Next.js, React Router, TanStack Start, Shopify Hydrogen, and more. It is plain React: no framework-specific runtime, no build step of your own, no styling work.

The package exports two components:

• <ProductGeniusFeed> — the recommendation feed. It loads Product Genius on the page and bridges the product context and the cart that a custom frontend does not provide on its own. This is the whole integration for most stores.
• <ProductGeniusSearchBar> — optional, for stores that also use Product Genius search. A working native search bar styled as a loading skeleton, which the live Product Genius search bar replaces once it mounts.

The integration cannot take your page down

That is the design, not a best-effort claim, and it is worth understanding before you review the diff:

• <ProductGeniusFeed> renders one empty <div> and injects a script. If the script never loads, never initializes, or loads for a store with nothing to show, the <div> stays empty. Nothing collapses, nothing reflows, and the component itself does not throw or log.
• <ProductGeniusSearchBar> renders a real <form> (or, in icon layout, a real link to your search page) pointed at your own native search route. If the Product Genius bundle never loads, visitors keep a search bar that works — the skeleton is the fallback, not a placeholder for one.
• The component is client-only. It renders the empty mount node on the server (if you server-render at all), then loads the feed on the client.

The practical consequence: your storefront-side changes cannot break your product page, and the Product Genius side cannot either. The two halves fail independently and both fail quietly. The integration guide has the verification checklist and a symptom-to-owner triage table for when the feed is quiet but you expected it not to be.

This package is the frontend only

Your organization, store configuration, catalog, and recommendations are provisioned on the Product Genius side, separately from this package, through your Product Genius contact. That includes:

• your organization and the catalog/recommendation pipeline behind it,
• the feed's appearance (design tokens and style overrides — there is no styling work in your storefront),
• headless mode, which routes cart events to your own onAddToCart instead of a classic Ajax cart,
• the page patterns that decide which of your URLs Product Genius may render on,
• and, if you use it, the search configuration.

On Shopify, provisioning starts with installing the Product Genius app — see the Shopify section.

This component is what renders the result on your storefront. Rendering it on a store that has not been configured yet is harmless and is a reasonable way to land the code early — see who owns what.

Compatibility

• React ^18 || ^19 — react and react-dom are peer dependencies.
• Builds — ESM and CJS, with TypeScript declarations included.
• Frameworks — any React 18/19 environment: plain React (Vite), Next.js App Router (the components carry "use client", so a Server Component can import and render them directly), React Router framework mode, TanStack Start, and Shopify Hydrogen (both the Remix v2 build and the React Router 7 build). See framework guides.
• Distribution — a private, UNLICENSED package handed to integrating stores rather than published on the public npm registry. See install.

Beyond React

At runtime the component loads and bridges the same classic Product Genius bundle (tag.js) that every integration — React or not — ultimately talks to. The React-specific part is small: mount lifecycle, prop-to-global bridging, and cart event wiring. The same pattern can be built for another JavaScript framework (Vue, Svelte, Angular) or for a native mobile storefront via a WebView bridge. None of that exists today — if your storefront needs one, talk to your Product Genius contact.

If your storefront is not React at all, you place the bundle yourself rather than through a component. Sign in and the custom-storefront integration guides appear in your sidebar.

Start here