Deploy an Agora voice agent on Vercel
Use this path when you want a live voice agent, not just the UI preview.
Agora provides the realtime media channel and ConvoAI agent. Vercel hosts the React app and the server routes that mint RTC tokens and start the agent.
What ships
The deployed app has three moving parts:
- An Agora project with RTC enabled and an App Certificate.
- A published Agora AI Studio / ConvoAI pipeline.
- The
agora-agent-pipeline-templateNext.js app deployed on Vercel.
The browser never receives your Agora App Certificate. The template's server route creates RTC tokens and starts the ConvoAI agent.
Quick start with npm create
Create a fresh app from the published scaffold package:
npm create agora-realtime-agent@latest my-agent
cd my-agent
cp .env.example .env.local
Fill .env.local with AGORA_APP_ID, AGORA_APP_CERTIFICATE, and AGORA_CONVOAI_PIPELINE_ID, then run:
npm run dev
npm init agora-realtime-agent@latest my-agent and npx create-agora-realtime-agent@latest my-agent are equivalent. Use -- --no-install when you only want to copy the template.
1. Create the Agora project
In the Agora Console:
- Create or select an Agora project.
- Copy the App ID.
- Enable or copy the App Certificate for token generation.
- Confirm that the project can use RTC and Conversational AI / AI Studio features in the region you plan to use.
You will deploy these values as Vercel server-side environment variables:
AGORA_APP_ID=...
AGORA_APP_CERTIFICATE=...
2. Publish an AI Studio pipeline
In Agora AI Studio / Conversational AI:
- Create a voice pipeline.
- Choose the pipeline's speech recognition, model, voice, and turn detection settings.
- Test the pipeline in AI Studio until the agent responds the way you expect.
- Publish the pipeline.
- Copy the published pipeline ID.
Set the ID as:
AGORA_CONVOAI_PIPELINE_ID=...
The template passes this value to agora-agents as pipelineId. The setup route sends it to Agora as the top-level pipeline_id, so the published pipeline owns ASR, LLM, TTS, and turn detection defaults.
3. Verify locally from this repo
Install dependencies and build the SDK:
npm install
npm --workspace agora-realtime-react run build
Create templates/agora-agent-pipeline/.env.local:
AGORA_APP_ID=...
AGORA_APP_CERTIFICATE=...
AGORA_CONVOAI_PIPELINE_ID=...
Start the template:
npm run dev:template
Open http://localhost:3000. Localhost is treated as a secure context by browsers, so microphone capture works for local testing.
4. Deploy the template on Vercel
The fastest path is the hosted Deploy Button:
The button points directly at the GitHub subdirectory templates/agora-agent-pipeline instead of the monorepo root. That matters because the root vercel.json builds the marketing website, while the template has its own local vercel.json:
{
"buildCommand": "npm run build",
"installCommand": "npm install",
"outputDirectory": ".next"
}
If you import manually, import this subdirectory URL as the template source:
https://github.com/AgoraIO-Community/agora-realtime-agent/tree/main/templates/agora-agent-pipeline
Add these Vercel environment variables for Production and Preview:
AGORA_APP_ID=...
AGORA_APP_CERTIFICATE=...
AGORA_CONVOAI_PIPELINE_ID=...
Deploy. After deployment, open the Vercel URL and start a voice session. The template calls:
POST /api/agora/realtime/setupto mint RTC tokens and start the ConvoAI agent.POST /api/agora/realtime/endto stop the agent when the session ends.
Why this split works
Agora does the realtime work: channel join, mic audio, subscribed agent audio, and the ConvoAI pipeline. Vercel does the web app work: React UI, server routes, environment variables, previews, and production deployment.
That split keeps sensitive Agora credentials out of the browser while still giving product teams a normal Vercel workflow.
Troubleshooting
agora_credentials_missing:AGORA_APP_IDorAGORA_APP_CERTIFICATEis missing in the Vercel environment.convoai_agent_start_failed: the pipeline ID, Agora project access, region, or ConvoAI entitlement is not valid for the current project.- Browser joins but no agent audio: open the debug panel with
?debug=1and check setup, join, publish, subscribe, and remote audio events. - Microphone fails in production: use HTTPS. Browsers block microphone capture on insecure origins.
References
- 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
- Agora Console: https://console.agora.io/
- Agora Agents SDK:
node_modules/agora-agents/README.md - Template setup route:
templates/agora-agent-pipeline/app/api/agora/realtime/setup/route.ts - Vercel monorepo deployment: https://vercel.com/docs/monorepos
- Vercel environment variables: https://vercel.com/docs/environment-variables