Agora Voice Agents for Vercel

AI SDK-compatible WebRTC voice, shipped as a Vercel app

Build Agora Voice Agents for Vercel.

Agora handles the live WebRTC channel and ConvoAI agent. Vercel hosts the React app, server routes, and deployment flow. This repo gives AI SDK-shaped hooks, a deployable template, and voice UI to connect both sides.

Deploy to VercelRead deployment guide
Local PCM0%
Human
caller PCM
AI
agent PCM
Format
8kHz s16le
Runtime
no live account
  1. AI

    Hello, this is Harper Valley National Bank. My name is Linda. How can I help you today?

  2. Human

    Hi Linda, my name is Robert Miller. I was wondering what your local branch hours are.

  3. AI

    Branch hours are nine thirty A.M. to five P.M.

  4. Human

    Wonderful. Okay, thank you for your help.

  5. AI

    Thank you for calling. Have a great day.

Audio: Harper Valley Bank branch-hours call, Gridspace-Stanford Harper Valley dataset, CC-BY-4.0.

Agora realtime media

The browser joins an Agora RTC channel directly. ConvoAI or an AI Studio pipeline joins the same channel as the agent.

AI SDK-compatible React layer

useAgoraRealtime follows the AI SDK realtime hook shape for status, messages, events, controls, and session config while Agora RTC remains the media path.

Vercel app boundary

Next.js routes on Vercel mint the RTC token, start the agent, and keep the Agora App Certificate on the server.

React developer path

Use the npm package for the full runtime, or install the voice ring through shadcn when you only need the UI.

NPM package

React runtime for AI SDK-compatible Agora agents in Vercel apps.

agora-realtime-react gives the browser a clean React API for Agora RTC with AI SDK Realtime-compatible types. Your Vercel route owns credentials, token generation, and ConvoAI startup.

  • useAgoraRealtime for Agora RTC session state in React
  • AI SDK Realtime-compatible status, UIMessage, and sessionConfig types
  • typed setup responses for Vercel server routes
  • useVoiceMeter for microphone and remote audio levels
  • VoiceRingButton for human and AI voice activity
Read package guide

Deploy path

Run an Agora agent from Vercel.

Publish a pipeline in Agora AI Studio, add the credentials to Vercel, and deploy the template. The browser gets only a scoped RTC token. The App Certificate stays server-side.

  1. Create an Agora project and copy the App ID plus App Certificate.
  2. Publish an AI Studio pipeline and copy its pipeline ID.
  3. Deploy the Vercel template with AGORA_APP_ID, AGORA_APP_CERTIFICATE, and AGORA_CONVOAI_PIPELINE_ID.
AGORA_APP_ID=...
AGORA_APP_CERTIFICATE=...
AGORA_CONVOAI_PIPELINE_ID=...
Deploy to VercelRead deployment guide

UI path

Add the Agora voice ring to any React app.

The shadcn registry serves the voice ring and meter hook from the same SDK source. Use it in a Vercel app, a prototype, or an existing design system without adopting the full template.

  1. Install the registry item with shadcn.
  2. Render VoiceRingButton from your shadcn UI alias.
  3. Feed human and AI levels from useVoiceMeter or your own audio analysis.
npx shadcn@latest add \
  https://agora-realtime-agent.vercel.app/r/voice-ring-button.json
Read shadcn guide

Official references

Build against Agora's English docs.

This project packages the Vercel and React path. Use Agora's official site and English documentation for product setup, RTC behavior, and AI agent configuration details.

Agora

Official Agora homepage for realtime engagement and AI products.

Agora Docs

English documentation hub for Agora product setup, SDKs, and APIs.

Realtime voice docs

Voice calling docs for the RTC media layer used by browser sessions.

AI and Conversational AI docs

Agora AI docs for agent pipelines, model configuration, and runtime concepts.