UI components
Agent Observability Provider
Context provider that every other component from this library expects. Install and mount it once, high in your tree — it creates the API client, resolves the current session, and shares the hooks that drive the rest of the UI. No visual output of its own.
Installation
pnpm dlx agent-observability-ui@latest add observability-providernpx agent-observability-ui@latest add observability-provideryarn dlx agent-observability-ui@latest add observability-providerbunx --bun agent-observability-ui@latest add observability-providerUsage
import { AgentObservabilityProvider } from '@/lib/observability-provider'
import { SessionDetailPage } from '@/components/session-detail-page'
// Wrap the subtree that needs session data. Pass a sessionId when
// rendering a single-session page; list pages can drop it.
export function App({ sessionId }: { sessionId: string }) {
return (
<AgentObservabilityProvider
baseUrl="https://observability.example.com/api"
sessionId={sessionId}
>
<SessionDetailPage />
</AgentObservabilityProvider>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
baseUrlrequired | string | — | Base URL of your Agent Observability API. In Vite dev, pair this with a /api proxy; in production, point it at the deployed service. |
sessionId | string | — | Optional session id the provider loads up-front. Downstream detail components (SessionHeader, SessionTimeline, TurnTranscriptSection, SessionEvents, SessionConfig, charts) read this through the context. Omit on list pages. |
childrenrequired | React.ReactNode | — | Your application tree. |
Vitest reporter
Vitest reporter that uploads LiveKit-agents eval results to Agent Observability. Same model as the pytest plugin: each `vitest run` is one eval_run; every `it(...)` becomes one eval_case.
useSessions
Paginated session list fetcher. Holds its own cursor — pass a stable initialOffset and drive pagination with setOffset. Refetches automatically whenever filters or offset change.