Views

An App can expose two views that SAALT renders inside its own UI: an admin view for configuration and a user view for the end-user chat experience. Views are ordinary web pages your App serves; SAALT iframes them and forwards an auth token so they can call back through the Bridge.

How views fit into an App

• SAALT learns which views you provide from /meta: set hasAdminChatPage and/or hasUserChatPage to true to opt in — otherwise SAALT never requests those routes.
• Each view is iframed inside SAALT and must respond with a renderable HTML page.
• Every request carries a Bridge auth header, so the view can make authenticated calls back to SAALT.

Code
 
// /meta — a user-only view
{
  "name": "Transcription",
  "hasAdminChatPage": false,
  "hasUserChatPage": true
}

Routing conventions

• User view — served at /app/{id}/user/:agentId.
• Admin view — served at /app/{id}/admin/:agentId.
• {id} is your App's own id, as declared in /meta — SAALT forwards the full prefixed path to your App, so define your routes at that full path (e.g. with the prefix() helper in routes.ts).
• The agentId route param identifies which Agent (and therefore which config/context) the page uses.

User view example

A user view is a React Router route: a loader reads the agentId, and an action uses the Bridge (injected by your bridgeMiddleware) to do the work — here, a translation via llm.generateText.

Code
 
import { data, type ActionFunctionArgs } from "react-router";
import { bridgeContext } from "~/context";

export const action = async ({ request, params, context }: ActionFunctionArgs) => {
  const bridge = context.get(bridgeContext)!;
  const agentId = params.agentId as string;
  const formData = await request.formData();
  const text = formData.get("text") as string;
  const language = formData.get("language") as string;

  const translation = await bridge.llm.generateText({
    prompt: `Translate to ${language}: ${text}`,
    options: { disableTools: true },
    agentId,
  });

  return data({ translation: translation.text });
};

The UI is a React component that renders inside SAALT, submits via <Form method="post">, and reads results with useActionData. Because bridgeMiddleware injects the Bridge into the request context, the action can call any SAALT capability (LLM, Tools, config) on the Agent's behalf.

Building your own view

1. Flip the meta flags in app/routes/meta.ts (hasAdminChatPage and/or hasUserChatPage).
2. Add the route file at app/routes/admin/index.tsx or app/routes/user/index.tsx.
3. Wire the Bridge — inject it via bridgeMiddleware on the parent layout, then read it from context in your loader/action.
4. Handle data with loader (read Agent-scoped data) and action (process form submissions).
5. Render the UI with your components; submit through React Router's <Form> so SAALT can hydrate state.
6. Test inside SAALT — see Local development.

Next steps

• Bridge — the SDK your view calls.
• Tools — add a federated component to visualize a Tool result.
• Local development — run and register your App locally.