App Views (Admin & User)

This note explains how SAALT Apps expose UI views for admins and end users. It is based on the existing translator App (user view) and Apps like dynaflow-whatsapp that ship an admin view.

How views fit into an App

• Each App can optionally expose two chat pages that the SAALT host renders inside its UI: an admin view for configuration and a user view for the end-user chat experience.
• SAALT learns which views you provide from app/routes/meta.ts. Set hasAdminChatPage / hasUserChatPage to true to opt in, otherwise the host will never request those routes.
• Views are iFramed within SAALT and are required to respond with a renderable page.
• Each request includes a bridge authentication header. This token can be used to make requests back to SAALT via the bridge.

This example shows a transcription App fully integrated into the chat window:

Code
 
// /meta
{
  name: "Transcription",
  // ...
  hasAdminChatPage: false,
  hasUserChatPage: true,
};

Routing conventions

• User view: served at /user/:agentId.
• Admin view: served at /admin/:agentId.
• The agentId route param identifies which agent (and therefore which config/context) the page should use.

User view example (translator App)

Path: plugins/translator/app/routes/user/index.tsx with hasUserChatPage: true. (Repo folder name is still plugins/ — only the user-facing term has changed.)

• Exports a loader to read agentId and an action that uses bridge.llm.generateText to perform the translation.
• 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, the action can call any SAALT capability (LLM, tools, config) on behalf of the agent.

Code
 
export const action = async ({ request, params, context }) => {
  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 });
};

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: either use a middleware to inject the bridge into the context or create it on the page directly.
4. Handle data with loader (read agent-scoped data) and action (process form submissions).
5. Render the UI using your preferred components; submissions go through React Router's <Form> so the host can hydrate state.
6. Test inside SAALT: the host will request your route only if the corresponding meta flag is true, passing agentId and auth headers so the bridge can call SAALT services.

With those pieces in place you can tailor both admin configuration pages and user-facing chat experiences directly inside your App.