@peerpage/embed-react

Trust model. This package is a thin React wrapper over @peerpage/embed-element and inherits its trust posture exactly: it is the only Peerpage code that runs in the host page's origin, and it executes nothing generated. Rendering <Peerpage> fetches a short-lived identity token from the host's own backend (same-origin, so the host session applies), mounts an iframe to the Peerpage runtime origin, and hands the token over via a postMessage handshake — never in the URL. All AI-built pages run inside that iframe, on our origin. The wrapper adds zero new I/O of its own: it renders the <peerpage-embed> custom element and forwards its attributes. A hostile reviewer should read ../embed-element (the ~150-line custom element) as the real trust surface; this file is just React ergonomics on top of it.

Why it exists

The framework-agnostic custom element (<peerpage-embed>) already works in any host, including React. This package gives React hosts idiomatic component DX — a typed <Peerpage> with camelCase props — without duplicating any of the embed logic. (The Angular host uses <peerpage-embed> directly; this is the React equivalent.)

Usage

import { Peerpage } from "@peerpage/embed-react";

export function WorkflowsPage() {
  return (
    <Peerpage
      slug="workflows"
      tenantId="fsh"
      platformUrl="https://run.peerpage.app"
      // tokenPath defaults to "/peerpage/token" — the route on YOUR backend
      // that mints the ≤5-minute identity token from the logged-in session.
    />
  );
}

react is a peer dependency (>=18; works with React 18 and 19). The embed defaults to display:block; width:100% and a height that fills the available space — size it with the props below (or your own CSS class).

Props

| Prop | Required | Description | |---|---|---| | slug | yes | The page to open, e.g. "flag-orders". | | tenantId | yes | The customer's tenant id, e.g. "fsh". | | platformUrl | yes | The Peerpage runtime origin. | | apiUrl | no | The Peerpage API origin (where /embed/config lives). Enables server-driven embed mode (inline vs iframe); omitted → always iframe. | | tokenPath | no | Host-backend route that mints the identity token. Default "/peerpage/token". | | width | no | Outer-box width, any CSS length. Default "100%". | | height | no | Sizing model: "fill" (default), "auto" (grow with content), or a CSS length ("720px", "80vh"). Iframe mode; inline sizes to the host flow. | | minHeight / maxHeight | no | Optional bounds on the box height (any CSS length) — handy with height="auto". | | className | no | Your CSS class on the box — border, radius, shadow, margin, background. | | style | no | Inline style object for one-offs (use width/height/minHeight/maxHeight for sizing). |

The embed box is your own element in your origin, so styling it is safe — none of this reaches the runtime inside. Example — a fixed-height card:

<Peerpage slug="workflows" tenantId="fsh" platformUrl="https://run.peerpage.app"
  width="480px" height="auto" minHeight="240px" maxHeight="80vh"
  className="rounded-xl shadow" />