Concepts de base

UI embeddable

Le sous-export @recalled/sdk/react livre un composant <RecalledFeed /> pensé pour vivre à l'intérieur du panneau admin, de la console support ou du back-office que ton équipe utilise déjà pour opérer ton produit. Son public : tes ingés support, ton équipe ops et SRE, tes reviewers compliance et audit, les gens internes qui doivent répondre à "qui a fait quoi, quand" sans changer d'outil.

Ce n'est pas un composant customer-facing. Les end users de ton SaaS ne voient jamais Recalled. Et ce n'est pas du white-label non plus, il n'y a rien à revendre à tes clients. Vois ça comme un widget d'observabilité interne, dans la même catégorie qu'un panel Grafana ou un feed Sentry que tu embarquerais dans ton admin.

Par défaut, le widget a accès à tout le projet, chaque event émis, tous tenants confondus, ce qui est exactement ce que tu veux pour une vue admin. Tu peux optionnellement restreindre une instance de widget à un seul tenant si tu construis un drill-down par client.

> Prérequis plan. Créer un embed token via client.embed.createToken() nécessite le plan Pro ou Scale. Un compte Free reçoit une erreur FORBIDDEN sur cet endpoint. La lecture d'events avec un token déjà émis n'est pas gated, tant que le token est valide, le widget fonctionne.

Installation

bash

npm install @recalled/sdk

Crée un token côté serveur

Le widget est piloté par un embed token court. Crée-le depuis ton backend pour que ta clé API ne touche jamais le navigateur, seul le token circule. Garde la route qui génère ce token derrière ton auth admin, pour que seuls les membres autorisés de ton équipe puissent y accéder.

// ton backend, par ex. dans une route admin protégée
import { Recalled } from "@recalled/sdk";

const client = new Recalled({ apiKey: process.env.RECALLED_API_KEY! });

// Vue admin par défaut : tous les events du projet, tous tenants confondus.
const { token } = await client.embed.createToken({ ttlSeconds: 900 });

// Optionnel : restreins cette instance précise du widget à un seul tenant (drill-down).
const { token: scoped } = await client.embed.createToken({
  organization: "org_acme",
  ttlSeconds: 900,
});
// envoie le token à ta page admin (props, réponse fetch, etc.)

Render en React

Branche le composant dans la page admin que ton équipe utilise déjà au quotidien. Le token vit sur ton backend admin, jamais dans le bundle navigateur, donc l'accès est gaté par ton auth admin existante.

tsx

import { RecalledFeed } from "@recalled/sdk/react";

export function AdminAuditLogPage({ token }: { token: string }) {
  return (
    <RecalledFeed
      embedToken={token}
      baseUrl="https://api.recalled.dev/v1"
      pageSize={50}
    />
  );
}

Le composant gère sa propre pagination et son refresh. Style-le avec ton propre CSS, il utilise des classes neutres sans couleurs hardcodées.