Skip to Content
🚀 Orga AI is in open beta.
DocumentationClient SDKsReactIntroduction

Introduction

What Is the React SDK?

The Orga React SDK (@orga-ai/react) connects your React app to Orga’s multimodal AI runtime — exposing hooks, components, and providers for building real-time voice, video, and data interactions. It provides idiomatic React hooks and context so you can authenticate users, manage real‑time media, and orchestrate AI‑driven sessions — without handling low‑level signaling yourself.

  • Built on top of @orga-ai/core, a framework-agnostic TypeScript library that owns transport, state, and orchestration.
  • Ships progressive support for browsers, Electron, and hybrid shells that embed a DOM-powered runtime.
  • Designed to interoperate cleanly with the Orga Server SDKs for Node.js and Python when you need to mint tokens or run server-driven automations.

Why Use It?

  • Rapid integration: Drop in the provider, call a hook, and you have a fully managed Orga session with events, media streams, and AI actions.
  • Consistent abstractions: React hooks mirror the core API surface, reducing drift between frontend and backend capabilities.
  • Reliable media foundation: WebRTC‑based streaming with automatic device negotiation and clear event flows for audio and video.
  • Composable UX: Bring your own components or start with Orga’s primitives to ship production UI quickly.

How It Works

At runtime, the React SDK wraps the Orga core client inside a provider and synchronizes the session into React state.

  1. Initialization — Your app renders OrgaAIProvider with credentials and optional configuration.
  2. Session bootstrap — The provider instantiates the core client, negotiates auth with the Orga backend, and prepares WebRTC transports.
  3. Interaction — Hooks such as useOrgaAI() surface connection state, media tracks, and control functions.
  4. Events & teardown — Listens for lifecycle events (ICE restarts, reconnections, disconnects) and cleans up resources when unmounted.

Dependencies

  • React ^18.2.0 or newer. The SDK uses concurrent-friendly hooks and context patterns.
  • Browser APIs: Requires WebRTC (RTCPeerConnection, MediaStream) and Permissions APIs. For legacy browsers, ship your own polyfills or fall back to the HTTP transport exposed by @orga-ai/core.
  • Tooling: Works with Next.js, Vite, CRA, and custom webpack setups out of the box. Ensure your bundler resolves the exports map so platform-specific builds load correctly.
  • Backend integration: You’ll still need a backend integration (Server SDK in Node or Python, or a custom proxy) to mint ephemeral access tokens for client authentication.

Next Steps

  • Quick Start → Step‑by‑step setup and backend integration.
  • Architecture → Understand how each layer (UI → SDK → core → backend) works together.
  • API Reference → Reference for the OrgaAI class.
Last updated on
ChangelogQuick Start