Web calling w/ Vapi + LMNT

Quickstart

Here is a v0 demo for how Vapi can be integrated into a web app to create a voice assistant with an LMNT voice. This example uses the Vapi web SDK to configure a new assistant and start a call with it.

To try live and to edit, follow these steps:

1. 1
   Retrieve Vapi API key

   Grab your public API key from the Vapi dashboard.

   Make sure your LMNT API key is configured in the Vapi dashboard as well!

2. 2
   Fork the app

   Sign into v0 and select Fork to create your own copy of the app.

3. 3
   Add Vapi API key as environment variable

   In settings -> environment variables, create a new environment variable called NEXT_PUBLIC_VAPI_API_KEY with your Vapi public API key as the value.

Understanding the code

Let's examine the code in page.tsx that configures LMNT.

// Line 228
const assistantOptions = {
  name: "Pizza Assistant",
  firstMessage: "Vappy's Pizzeria speaking, how can I help you?",
  transcriber: {
    provider: "deepgram",
    model: "nova-2",
    language: "en-US",
  },
  voice: {
    provider: "lmnt",
    voiceId: "amy",
  },
  ...

Calls to the Vapi assistant are made with vapi.start(assistantOptions). When defining assistantOptions, LMNT is selected and configured through the voice property. Try changing the voiceId to start a call with a different voice!

Next Steps