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.

v0 demo for LMNT + Vapi

To try live and to edit, follow these steps:

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

Fork the app

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

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!

LMNT voice ids can be found in the LMNT playground’s voice library.

Next Steps

Learn more about Vapi web calling

Read on for more information on Vapi’s browser-based capabilities.