Core concepts

Embeddable UI

The @recalled/sdk/react sub-export ships a <RecalledFeed /> component designed to live inside the admin panel, support console or back-office your own team already uses to operate the product. Its audience is your support engineers, your ops and SRE, your compliance and audit reviewers, the internal people who need to answer "who did what, when" without context-switching to a second tool.

It is not a customer-facing component. The end users of your SaaS never see Recalled. This is not white-label either, there is nothing to resell to your customers. Think of it as an internal observability widget, in the same bucket as a Grafana panel or a Sentry issue feed embedded in your admin.

By default the widget has access to the whole project, every event emitted, across every tenant, which is what you want for an admin view. You can optionally narrow a given widget instance to a single tenant if you build a per-customer drill-down.

> Plan requirement. Minting embed tokens via client.embed.createToken() requires the Pro or Scale plan. Free accounts get a FORBIDDEN error on that endpoint. Reading events via an already-minted token is not plan-gated, if a token is valid, the widget works.

Install

bash

npm install @recalled/sdk

Mint a token server-side

The widget is driven by a short-lived embed token. Mint it from your own backend so your API key never touches the browser, only the token does. Keep that backend route behind whatever admin auth you already use, so only authorized team members can reach it.

// your backend, e.g. inside a protected admin route
import { Recalled } from "@recalled/sdk";

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

// Default admin view: every event in the project, across every tenant.
const { token } = await client.embed.createToken({ ttlSeconds: 900 });

// Optional: narrow this particular widget to a single tenant (drill-down).
const { token: scoped } = await client.embed.createToken({
  organization: "org_acme",
  ttlSeconds: 900,
});
// send the token to your admin page (props, fetch response, etc.)

Render in React

Drop the component inside the admin page your team already uses day to day. The token lives on your admin backend, never in the browser bundle, so access is gated by your existing admin auth.

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}
    />
  );
}

The component handles its own pagination and refresh. Style it through your own CSS, it uses plain class names with no hard-coded colors.