Voice JavaScript SDK: Reference Components

While the quickstarts enable you to quickly set up a functional application for making and receiving phone calls via a web browser in just a few minutes, the reference components offer flexible building blocks for your Twilio Voice applications. Designed around common Twilio Voice use cases, these components leverage Web Components to showcase integrated backend and frontend implementations. You can easily incorporate these components into your application or use them as a foundation for your development needs.

Before proceeding, take a moment to explore how the JavaScript SDK works and review the getting started page to familiarize yourself with key concepts.

• Use cases
• Installation
• Running locally

The reference components demonstrate several common Twilio Voice use cases. For detailed implementation guidance, visit the Twilio Voice JavaScript Reference Components repository. These use cases include:

• Dialer
  • Place outgoing calls
  • Receive incoming calls
• Basic call control (uses Conference)
  • Perform cold or warm transfers
  • Add or remove participants
  • Hold and Resume a call
  • Mute and Unmute a call
• Monitoring (uses Conference)
  • Observe call progress
  • Track conference call status
  • View quality metrics
  • Receive warnings
  • View errors
• Voice AI Assistant
  • Place an outbound call and connect to an agent
  • Provide a WebSocket server
  • Basic OpenAI integration

1. Clone the Twilio Voice JavaScript Reference Components GitHub repository.

git clone https://github.com/twilio/twilio-voice-js-reference-components.git

2. Install the dependencies.

npm install

3. Copy example.env to .env, then supply the required values. For details about each variable, see the quickstart.

1
# Port number to run the server on
2
PORT=3030
3

4
# Twilio account sid
5
ACCOUNT_SID=ACxxxxxxxxxxxxxx
6

7
# Twilio API key
8
API_KEY_SID=SKxxxxxxxxxxxxxx
9

10
# Twilio API secret
11
API_KEY_SECRET=xxxxxxxxxxxxxx
12

13
# Twilio TwiML App SID
14
# The Voice Request URL must point to one of the /twiml endpoints listed later in this guide.
15
# For details, see https://www.twilio.com/docs/voice/sdks/javascript#twiml-applications
16
APP_SID=APxxxxxxxxxxxxxx
17

18
# Twilio auth token
19
AUTH_TOKEN=xxxxxxxxxxxxxx
20

21
# Caller ID
22
CALLER_ID=+11234567890
23

24
# Public base URL that Twilio can reach.
25
# If you run the components locally, use a tunneling service such as ngrok.
26
# Do not include the scheme (https:// or wss://) in the URL.
27
CALLBACK_BASE_URL=foo.ngrok.dev
28

29
# Default identity to use
30
DEFAULT_IDENTITY=alice
31

32
# twilio-voice-ai-assistant
33
# See https://platform.openai.com/settings/organization/api-keys
34
OPENAI_API_KEY="sk-proj......."

4. In the Twilio Console, open your TwiML App settings and set Voice Request URL to the endpoint for the component you want to test:

1
https://yourdomain/twilio-voice-dialer/twiml
2
https://yourdomain/twilio-voice-basic-call-control/twiml
3
https://yourdomain/twilio-voice-monitoring/twiml
4
https://yourdomain/twilio-voice-ai-assistant/twiml

1. Start the local server under the twilio-voice-js-reference-components folder.

npm start

2. Open a browser and navigate to a component URL.

• Dialer: http://localhost:3030/twilio-voice-dialer?identity=bob
• Basic call control: http://localhost:3030/twilio-voice-basic-call-control?identity=bob
• Monitoring: http://localhost:3030/twilio-voice-monitoring?identity=bob
• Voice AI Assistant: http://localhost:3030/twilio-voice-ai-assistant?identity=bob