Conversation UI & theming

OpenGeniChat is the default: the signed-in user’s chats plus the conversation. The list is a sidebar when the component is wide and a drawer behind a menu button when it is narrow, measured on its own container, so it works in a side panel as well as a full page. It starts new chats from their first message through the proxy’s createSession hook, and lets users rename and archive chats.

<OpenGeniProvider client={client} workspaceId={workspaceId}>
  <OpenGeniChat conversationProps={{ toolRegistry }} />
</OpenGeniProvider>

The proxy lists only the chats the user created (sessionList: "mine", the default); sessionList: "visible" lists every chat the user may read in the workspace. Control the selection with sessionId and onSessionChange (for example from the URL), or mount SessionList and SessionConversation separately. Import the conversation components from @opengeni/react/session-ui. It has no optional peers; the package root also exports the workbench (editor, terminal, desktop), whose dependencies are optional peers your app would otherwise need to install. SessionConversation is the complete conversation for one session: streaming replies, tool activity, approvals, structured questions, file attachments, the message queue, Steer, and Pause/Resume. It uses the SDK client from OpenGeniProvider, so it works unchanged behind the session proxy.

import { OpenGeniClient } from "@opengeni/sdk";
import { OpenGeniProvider, SessionConversation } from "@opengeni/react/session-ui";
import "@opengeni/react/compiled.css";

const client = new OpenGeniClient({ baseUrl: "/api/opengeni" });

<OpenGeniProvider client={client} workspaceId={workspaceId}>
  <SessionConversation sessionId={sessionId} height="100%" />
</OpenGeniProvider>;

Props

Prop	Purpose
`sessionId`	Required. The session to show
`attachments`	File attachments in the composer. Defaults to `true`
`modelPicker`	Show the model picker. Hidden automatically when the proxy fixes the model
`toolRegistry`	Your own renderers for your tools; defaults to the built-in registry
`renderMessageText`	Custom rendering for message text, such as links into your product
`height`	Defaults to filling its container; the host owns the available height
`className`	Class on the root element
`composerProps`	Presentation options for the composer, such as placeholder text

Remount or reset the component when the signed-in user or tenant changes.

Brand it

compiled.css is scoped to the components and needs no Tailwind. Every visual decision is a --og-* CSS variable. Override them on any ancestor:

.assistant-panel {
  --og-color-accent: oklch(0.55 0.2 280);
  --og-color-bg: #ffffff;
  --og-font-sans: "Inter", system-ui, sans-serif;
  --og-radius-md: 8px;
}

Dark is the default. Add data-og-theme="light" to an ancestor for the light theme, and data-og-density="compact" for narrow side panels:

<aside className="assistant-panel" data-og-theme="light" data-og-density="compact">
  <SessionConversation sessionId={sessionId} />
</aside>

Menus and dialogs that render in a portal copy the theme from the element that opened them. The full token list is in tokens.css.

Render your tools

Tool calls to your own MCP server can render as product UI instead of a generic activity row. Tool names are <server id>__<tool name>:

import { createDefaultToolRegistry, type ToolRendererProps } from "@opengeni/react/session-ui";

function TicketTool({ item }: ToolRendererProps) {
  return <TicketCard call={item} />; // item.arguments, item.output, item.status
}

const toolRegistry = createDefaultToolRegistry({
  entries: [{ match: "name", name: "acme__get_ticket", render: TicketTool }],
});

<SessionConversation sessionId={sessionId} toolRegistry={toolRegistry} />;

Start sessions from the browser

OpenGeniChat’s new-chat composer, and any browser createSession call, go through the proxy’s createSession hook; without it, browser-started sessions are refused. The browser sends only the first message and an idempotency key; your hook returns the full request, so tools, skills, and model policy stay server-side:

createSessionProxyHandler(og, {
  resolve,
  createSession: (input) => ({
    ...input,
    agent: { capabilities: "none" }, // see Configure the agent
    tools: [{ kind: "mcp", id: "acme" }],
    sandboxBackend: "none",
  }),
});

Links, artifacts, and Sites

Retained-file links download by file ID by default. Sandbox-path links render unavailable unless the proxy enables sandboxFiles: true; enabled reads stay inside the session working directory and refuse symlink components. Use resolveLink on SessionConversation or an outer OpenGeniLinkProvider to route editable artifacts and Sites to your product’s own authenticated pages. Or use onOpenArtifact with SessionArtifactViewer from @opengeni/react/artifacts and enable the proxy’s artifacts: true. The proxy resolves fresh user grants and checks the exact source session on every read; Site HTML streams with a 25 MiB ceiling (site_html_too_large on overflow). Server-only proxy read helpers live on @opengeni/sdk/session-proxy. For non-React renderers, use parseOpenGeniLink with isReservedOpenGeniLink; an invalid reserved reference must stay unavailable, never become a link on your own origin.

Other UI shapes

Headless hooks from @opengeni/react/session when you need a materially different interaction model but want the same event, queue, composer, and approval behavior.
The SDK alone for a non-React frontend, a CLI, or backend automation.
The chat facade when you already have a chat UI. See Keep your existing chat UI.

See the React reference for the full component list.

Using a coding agent? The opengeni-client skill covers this.

Get started

Build

Concepts

Guides

Reference

Examples

Further reading

Conversation UI & theming

Props

Brand it

Render your tools

Start sessions from the browser

Links, artifacts, and Sites

Other UI shapes

​Props

​Brand it

​Render your tools

​Start sessions from the browser

​Links, artifacts, and Sites

​Other UI shapes

Props

Brand it

Render your tools

Start sessions from the browser

Links, artifacts, and Sites

Other UI shapes