React sponsored offer component

Render action cards with default sponsored labels, impression tracking, and click helpers.

Install after registry publication

Public npm installation is a post-publication launch gate. Until `sdk:registries:verify` passes, use the workspace packages in local development.

npm install @thegenesis/react @thegenesis/api-client-js

Provider setup

import { GenesisProvider } from "@thegenesis/react";

<GenesisProvider config={{ apiKey: process.env.NEXT_PUBLIC_GENESIS_TEST_KEY!, mode: "test" }}>
  <SponsoredSuggestions />
</GenesisProvider>

Fetch and render

import { GenesisProvider, SponsoredOffer, useGenesisOffers } from "@thegenesis/react";

function SponsoredSuggestions() {
  const { offers, loading, error, noFill, refetch } = useGenesisOffers({
    placement_id: "plc_test_docs",
    message: "Which observability tool should I use for an MCP server?",
    categories: ["developer-tools"],
    max_offers: 2
  });

  if (loading) return <p>Loading sponsored suggestions...</p>;
  if (error) return <button onClick={() => void refetch()}>Retry</button>;
  if (noFill) return null;

  return offers.map((offer) => (
    <SponsoredOffer key={offer.offer_id} offer={offer} />
  ));
}

Disclosure and tracking