Web Calling

Anywhere you can run client-side JavaScript, you can run Vapi. All the way from vanilla to complex component-based applications with React and Next.js.

Installation

Install the package:

$
yarn add @vapi-ai/web

or w/ npm:

$
npm install @vapi-ai/web

Import the package:

1
import Vapi from "@vapi-ai/web";

Then, create a new instance of the Vapi class, passing your Public Key as a parameter to the constructor:

1
const vapi = new Vapi("your-public-key");

You can find your public key in the Vapi Dashboard.

Starting a Call

Assistants can either be created on the fly (temporary) or created & persisted to your account (persistent).

Option 1: Temporary Assistant

If you want to customize properties from the frontend on the fly, you can create an assistant configuration object and pass it to the .start() method.

Now we can call .start(), passing the temporary assistant configuration:

1
vapi.start(assistantOptions);

More configuration options can be found in the Assistant API reference.

Option 2: Persistent Assistant

If you want to create an assistant that you can reuse across multiple calls, you can create a persistent assistant in the Vapi Dashboard. Here’s how you can do that:

To customize additional fields, this can be done via the Assistant API instead.

Then, you can copy the assistant’s ID at the top of the assistant detail page:

Now we can call .start(), passing the persistent assistant’s ID:

1
vapi.start("79f3XXXX-XXXX-XXXX-XXXX-XXXXXXXXce48");

If you need to override any assistant settings or set template variables, you can pass assistantOverrides as the second argument.

For example, if the first message is “Hello {{name}}”, you can set assistantOverrides to replace {{name}} with John:

1
const assistantOverrides = {
2
  transcriber: {
3
    provider: "deepgram",
4
    model: "nova-2",
5
    language: "en-US",
6
  },
7
  recordingEnabled: false,
8
  variableValues: {
9
    name: "John",
10
  },
11
};
12
13
vapi.start("79f3XXXX-XXXX-XXXX-XXXX-XXXXXXXXce48", assistantOverrides);