Agora Realtime React

React hooks and voice UI primitives for Agora voice agents running inside Vercel and React apps.

agora-realtime-react gives the browser a typed Agora RTC runtime, audio metering, and a reusable voice ring button. Pair it with Vercel or any server runtime that can mint Agora RTC tokens and start a ConvoAI or AI Studio pipeline.

Homepage: agora-realtime-agent.vercel.app

Install

npm install agora-realtime-react

For package managers that do not auto-install peers, install the peer dependencies in your app:

npm install agora-rtc-sdk-ng @ai-sdk/[email protected] [email protected]

Requirements

• React ^18.3.0 or ^19.0.0.
• A browser-capable React app. The package owns the client Agora RTC session; it does not run on the server by itself.
• A server endpoint that returns the typed setup payload with an Agora App ID, RTC channel, UID, and RTC token.
• Agora App Certificate storage, RTC token generation, and ConvoAI / AI Studio start-end calls must stay server-side.
• Microphone capture requires HTTPS in production, or http://localhost during local development.

Exports

import {
  VoiceRingButton,
  microphoneCompatibilityWarning,
  useAgoraRealtime,
  useVoiceMeter,
} from 'agora-realtime-react';

What it owns

• useAgoraRealtime for browser-side Agora RTC session state and controls.
• useVoiceMeter for Web Audio level analysis from a MediaStream.
• VoiceRingButton for human and agent voice activity visualization.
• Typed setup contracts between your browser client and Vercel route.

Server boundary

The package does not store Agora credentials and does not publish AI Studio pipelines. Keep App Certificate storage, token generation, and ConvoAI join/leave calls on your server. The template in this repository shows the Vercel / Next.js route implementation.

Docs

• Package guide: https://agora-realtime-agent.vercel.app/docs/agora-realtime-react-package
• Demo and Vercel template: agora-realtime-agent.vercel.app
• Agora: https://www.agora.io/en/
• Agora Docs (English): https://docs.agora.io/en/
• Agora realtime voice docs: https://docs.agora.io/en/realtime-media/voice
• Agora AI and Conversational AI docs: https://docs.agora.io/en/ai