> ## Documentation Index
> Fetch the complete documentation index at: https://docs.checkfu.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed a Session view

> Render a durable Checkfu Session in your UI without exposing a Workspace API key.

The Session event log is the source for transcript, status, tool activity,
approvals, recovery, and continuation. A browser view should project that log;
it should not become a second transcript authority.

`@checkfu/ui` renders Session events and emits interaction intents. Your trusted
backend owns the Checkfu API key and exposes only the narrow routes your UI
needs.

<Warning>
  `@checkfu/ui` is not published to npm during private alpha. Build against it
  from a Checkfu source checkout or an explicitly authorized alpha package.
  Do not invent a registry install command.
</Warning>

<Warning>
  The Checkfu CLI and TypeScript SDK are private-alpha artifacts with no self-service public installation channel.
  Part of this flow is behind a rollout fence; a deployment that has not enabled it refuses the request rather than running it.
  Confirm [capability status](/getting-started/status) before making availability part of your application's contract.
</Warning>

## Keep the API key on the server

Expose two authenticated routes:

1. a paginated event-list route; and
2. a resumable event-stream route.

For each request, the backend must authenticate the application user, verify
that user may observe the requested Session, attach the server-held Checkfu key,
and forward only the exact upstream operation. Never expose a generic
credentialed proxy.

The same rule applies to writes. Composer messages, interrupts, question
answers, and ActionApproval decisions are UI intents sent to narrow backend
handlers. The browser never writes arbitrary Session events with a Workspace
credential.

## Bind the UI transport

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { useSessionEvents, workspaceProxyTransport } from "@checkfu/ui/sdk"

const transport = workspaceProxyTransport({
  sessionId,
  routePrefix: "/api/checkfu",
})

const state = useSessionEvents({
  sessionKey: sessionId,
  transport,
})
```

`useSessionEvents` reconnects with the last persisted sequence, deduplicates
replayed events, performs bounded gap recovery from the event page, and replaces
live previews with their persisted envelopes. Render from `state.events` in
`seq` order.

A reconnect is not a new Run, and a stream close is not settlement. Derive
settlement from durable boundary events in the log. Follow
[Resume a stream](/guides/resume-a-stream) for the exact cursor behavior.

## FileTree threads and approvals explicitly

Keep the Session ID as the aggregate key and preserve each event's ordering.
Do not turn harness-local output into an independent history.

When the log contains a pending ActionApproval, retrieve the approval resource
through the backend and render its frozen action context. Approve or deny through
a narrow backend handler, then continue projecting the Session log. See
[Handle an approval](/guides/handle-an-approval).

## Handle retention honestly

Standard retention and ZDR do not promise the same persisted material. Your UI
must tolerate a resource or event body being unavailable under the Session's
retention posture instead of reconstructing it from traces, browser caches, or
runtime narration. For retained history and portability, use the bounded Session
export path described in [Export your log](/guides/export-your-log).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.