Components

The Orga React SDK provides small, focused primitives that handle audio/video rendering and session context.
All components are optional—you can always build your own UI using hooks directly.

`<OrgaAIProvider>`

Wraps your application with the Orga context and initializes the client for all child components.


import { OrgaAIProvider } from "@orga-ai/react";
 
export function OrgaClientProvider({ children }: { children: React.ReactNode }) {
  return (
    <OrgaAIProvider>
      {children}
    </OrgaAIProvider>
  );
}

Prop	Type	Required	Description
`children`	`ReactNode`	✅	Components that will consume the Orga context.

OrgaAIProvider manages the core client lifecycle for you—initialization, cleanup, and token refresh—so hooks like useOrgaAI always have a live context.

`<OrgaAudio>`

Renders an HTML <audio> element that plays back Orga’s synthesized or AI‑generated audio streams.
Use this component to render the incoming audio (AI voice or aggregated stream).


import { OrgaAudio } from "@orga-ai/react";
 
<OrgaAudio stream={aiAudioStream} />;

Prop	Type	Required	Description
`stream`	`MediaStream`	✅	Target audio stream (usually `aiAudioStream` from `useOrgaAI`).
`autoPlay`	`boolean`	❌	Automatically starts playback when attached. Defaults to `true`.
`muted`	`boolean`	❌	Mute output for debugging or local monitoring.
`className`	`string`	❌	CSS class for styling.

🎧 Note: On Safari and iOS, ensure user interaction has occurred before playback. Use autoPlay and playsInline for best results.

`<OrgaVideo>`

Renders a <video> element for a MediaStream.
Use it for the local camera stream (userVideoStream)


import { OrgaVideo } from "@orga-ai/react";
 
<OrgaVideo stream={userVideoStream} className="w-full h-64 rounded bg-black" />;

Prop	Type	Required	Description
`stream`	`MediaStream`	✅	Video stream to display.
`autoPlay`	`boolean`	❌	Autoplays when stream changes. Defaults to `true`.
`playsInline`	`boolean`	❌	Prevents full‑screen takeover on mobile Safari. Defaults to `true`.
`className`	`string`	❌	CSS hook for layout and styling.

Notes

Components in @orga-ai/react are lightweight bindings—you can replace them with your own <video> or <audio> elements if you prefer full styling control.
They automatically attach and clean up srcObject references when streams update or unmount.
Both <OrgaAudio> and <OrgaVideo> can be controlled imperatively via refs if needed.

Next Steps

Hooks → Control sessions, devices, permissions, and AI interactions using useOrgaAI().
Provider Architecture → Understand how context, hooks, and the core runtime interact.
API Reference → Reference for the OrgaAI class.
Troubleshooting → Troubleshooting guide.