Skip to documentation
Documentation navigation

Documentation navigation

Documentation / guides

Web UI

Build session interfaces with the framework-neutral Looprig client, then add an adapter or embed the resulting app when needed.

developer

Start with the framework-neutral client

The browser-facing starting point is the framework-neutral TypeScript client. Create a LooprigTransport once, pass it to a small session facade, and render the resulting SessionView in whatever UI system already owns the page. createBFFClient is the default for a same-origin app: it calls the BFF and keeps the bearer credential on the server side.

import { createBFFClient, createFetchLiveFrameSource, type SessionView } from "@looprig/client";
import { SessionClient } from "./session-client.js";

const transport = createBFFClient();
const sessions = new SessionClient(transport, {
  liveSource: (sessionId) => createFetchLiveFrameSource(sessionId),
});

const stop = sessions.connect("session-id", {
  onView: (view: SessionView) => renderTranscript(view),
  onError: (error) => renderSessionError(error),
});

// Call stop when the route or component leaves the page.
button.addEventListener("click", stop, { once: true });

The facade owns subscription cleanup and forwards user intent to typed transport methods. A renderer only needs the stable view shape, rather than knowing whether an update came from the durable journal or the live SSE stream.

Guide map

Use the Client SDK guides for the transport, events, folding, validation, and ownership contracts. Choose Framework adapters when a DOM binding or Svelte 5 state wrapper is useful. Follow Embedding to package the app as a static bundle and serve it from Go. The Session lifecycle guides cover binding, exact reconnect joins, and restoring a durable session. The Harness guide is the adjacent server contract that the browser client calls.

The framework-neutral route is the primary API. A Svelte adapter is optional and should wrap this same client rather than replace its transport, event parser, or state fold.

Source

The public barrel exports the transport, validation, SSE, fold, join, and action surfaces from sdk/core/src/index.ts. The end-to-end framework-neutral shape is shown in sdk/core/examples/session-client.ts.

Proof

The example composes createBFFClient, SessionClient, SessionView, and an explicit cleanup function. The source barrel proves these pieces are public exports, while the linked example proves the intended framework-neutral composition.

← back to documentation