Guide
Orga AI Platform

Introduction

Overview

The Orga AI React SDK, available on npm as @orga-ai/react, is a React-based library that simplifies real-time audio and video interactions in web applications using WebRTC, a protocol for peer-to-peer multimedia communication. Designed for React-based frameworks (e.g., React, Next.js, Remix), the SDK abstracts WebRTC connection logic, enabling seamless integration with the /v1/realtime/calls endpoint for voice assistants, video calls, or interactive experiences. By leveraging React Context and hooks, it provides a developer-friendly interface for managing audio or video streams with minimal setup.

Key Features

  • Multimodal Communication: Supports audio-only or audio+video streams, configurable based on your app’s needs.

  • Transcriptions: Provides transcriptions for user and AI audio, enhancing accessibility and interaction logging.

  • Customizable Responses: Configure voice, tone, and behavior (e.g., voice: "nova", instructions: "Respond in a friendly tone").

  • React Integration: Uses React Context and the useOrgaAI hook for intuitive state management and method access.

  • No Additional Dependencies: Relies on native browser WebRTC APIs RTCPeerConnection, navigator.mediaDevices).

Why Use the React SDK?

The SDK eliminates the complexity of WebRTC by handling connections, SDP negotiation, and ICE candidate management internally. Developers can focus on building features like voice assistants or video chats using simple React hooks, while a backend proxy secures API credentials, making integration fast and reliable.

Prerequisites

  • React: Version 16.8 or higher (for hooks support).

  • Browser: Chrome, Firefox, or any browser with WebRTC support.

  • Orga AI Credentials:

    • API key from the Orga AI dashboard.

    • Registered email (e.g., test@example.com).

  • Permissions: Browser must allow microphone and camera (for video) access.

  • Environment: Node.js (for npm) and a web server (e.g., Next.js or npx http-server for local development).

  • Backend Proxy: A server (e.g., Next.js API routes) to handle /v1/realtime/client-secrets and /v1/realtime/ice-config requests securely.

Getting Started

  1. Install the SDK via npm: npm install @orga-ai/react.

  2. Set up a backend proxy (e.g., Next.js API routes) to fetch client secrets /v1/realtime/client-secrets) and ICE servers /v1/realtime/ice-config). See the Orga AI Quickstart examples.

  3. Initialize the SDK with Orga.init, passing a fetchSessionConfig function to handle backend requests, and wrap your app in the OrgaProvider component.

  4. Use the useOrgaAI hook to manage WebRTC connections and access audio/video streams or transcriptions.

  5. Refer to the API Reference for /v1/realtime/calls endpoint details and request/response formats.

Versioning

Future releases may introduce breaking changes. Review changelogs and test beta releases to stay up to date.

Next Steps

Quick Start

An easy to follow guide to setup the SDK and incorporate Orga AI into your web app

API Reference

Link to a page in the guide