UI components

@agentoria/ui is optional, lightly-structured React components. They ship unstyled — structural markup with data-agentoria hooks — and you opt into a default theme, or write your own CSS.

ChatPanel

The full chat experience over useAgentChat — streaming text, markdown, tool traces, a rich composer (attachments · voice · stop · regenerate), and generative UI:

'use client';
import { ChatPanel, AgentoriaStyles } from '@agentoria/ui';

export default function Page() {
  return (
    <>
      <AgentoriaStyles />
      <ChatPanel
        endpoint="/api/agent"
        placeholder="Ask anything…"
        initialHistory={[{ role: 'assistant', content: 'Hi! How can I help?' }]}
        onFeedback={(index, rating) => save(index, rating)}
      />
    </>
  );
}

Slots

Every part is overridable via components — bring your own Message, Composer, ToolTrace, Error, or text renderer while keeping the transport:

<ChatPanel endpoint="/api/agent" components={{ Message: MyBubble, Composer: MyComposer }} />

MetricsDashboard

The admin view from your telemetry stats — stat tiles, a calls/errors trend, outcome pills, and per-model / per-tool tables:

<MetricsDashboard stats={stats} tools={tools} toolOutcomes={outcomes} />

Companions: <TrendChart/> (dual-line SVG), <LlmCallLog/> (expandable per-call debug log), <TraceTimeline/> (span waterfall), <ToolMetricsTable/>.

Theming

Render <AgentoriaStyles/> once for a clean default. Customize by overriding the --ao-* CSS variables — no rebuild, no fork:

[data-agentoria] {
  --ao-accent: #7c3aed;
  --ao-radius: 14px;
}

Or skip the theme entirely and style the data-agentoria / data-role / data-status attributes yourself.