TrueForge logomark

TrueForgeUI

controls & code storybook

previewsidebar layout · 0 slots overridden
Loading SDK UI…

This is the SDK's own TrueForgeUI. Every control maps to a real prop; slot overrides you write are compiled and passed to the SDK live.

TrueForgeUI
<TrueForgeUI
  server={server}
  layout="sidebar"
  agentConfig={{"mode":"AgentLibraryWithComposer","defaultAgentSpec":{"model":{"name":"openai-main/gpt-4.1"}}}}
  theme={{
    preset: "trueforge",
    mode: "light",
  }}
  className="h-full"
/>
props reference
server*
AgentUIServer
Chat + builder port. Build it with createTrueFoundryServer() or implement AgentUIServer yourself.
layout*
'sidebar' | 'drawer' | 'dock' | 'widget' | CustomLayout
Built-in layout string or a React component that composes Thread / ThreadListContainer itself.
agentConfig
AgentConfig
Shell mode: { mode: "SingleAgent", name } locks to one agent; "AgentLibrary", "AgentComposer" or "AgentLibraryWithComposer" (default) take an optional defaultAgentSpec.
theme
ThemeConfig
preset, mode, tokens (primary, background, foreground, muted, accent, radius) and brand.
overrides
Partial<SlotOverrides>
Swap any curated slot — composer pieces, message bubbles, Markdown, tool + prompt cards.
className
string
Applied to the layout root element.
initialSessionId
string
Resume a specific chat session on mount.
onError
(error: unknown) => void
Host error hook for surfacing SDK failures in your app.
install
shell
npm install @truefoundry/trueforge-ui

/* styles.css */
@import "tailwindcss";
@import "@truefoundry/trueforge-ui/styles.css";