Retell AI — Browser Voice Call Demo (React + Node)

Talk to an AI voice agent right from the browser. A minimal full-stack demo: a React frontend that joins a live web call and a tiny Node/Express backend that mints the access token.

The real thing (running UI)

Screenshot of the app running locally: title, live status and the start/stop call controls.

---

Why

Voice is becoming the default interface for AI agents, but the plumbing is fiddly: you need a short-lived token, a client SDK that speaks WebRTC, and somewhere safe to keep the API key.

This demo shows the whole loop in ~120 lines:

• Backend keeps the Retell API key server-side and returns a one-shot access_token.
• Frontend uses retell-client-js-sdk to join the call, with start/stop controls and a live status.

The API key never touches the browser. That is the point.

How it works

   browser (React + retell-client-js-sdk)
        │  1. GET /create-web-call
        ▼
   backend (Express)  ──►  Retell API  (api key stays here)
        │  2. { access_token }
        ▼
   browser  ──►  WebRTC call with the agent

1. The user clicks Iniciar Llamada.
2. The frontend calls GET /create-web-call on the backend.
3. The backend asks Retell for a web call and returns the access_token.
4. The frontend hands that token to retell-client-js-sdk, which starts the audio call.
5. Detener Llamada ends it.

Quickstart

1. Backend

cd backend
npm install
cp ../.env.example .env     # then put your real values in
npm start                  # http://localhost:3000

.env:

RETELL_API_KEY=your_retell_api_key
RETELL_AGENT_ID=your_retell_agent_id

2. Frontend

cd frontend
npm install
npm start                  # http://localhost:3000 (React picks 3001 if busy)

Open the app, allow the microphone, and click Iniciar Llamada.

Project structure

retell-web-call-react/
  backend/
    index.js               # Express: GET /create-web-call → Retell access_token
    package.json
  frontend/
    src/App.tsx            # call UI + retell-client-js-sdk
    src/index.tsx
    public/index.html
    package.json
  .env.example

Notes

• You need a Retell account with an agent created; the agent id goes in .env.
• npm start on the frontend runs CRA; if port 3000 is taken by the backend, React prompts for another port.
• Never ship RETELL_API_KEY to the client — that is exactly what the backend is for.

License

MIT — Copyright (c) 2026 Sergio Lim.