Web Call

Learn to make a web call to your assistant

Overview

You can use Vapi anywhere you run client-side JavaScript. This includes plain JavaScript, React, Next.js, and other web frameworks.

This guide shows you how to make a web call to your Vapi assistant. You can create an assistant using the web SDK or the Vapi dashboard.

See the full next.js demo here on v0. To try it live and make edits, follow these steps:
  1. Fork the app in v0
  2. Go to settings —> environment variables
  3. Create a new environment variable called NEXT_PUBLIC_VAPI_API_KEY
  4. Add your public api key from the dashboard!

Installation

1

Install the SDK

Install the package with your preferred package manager.

$# with npm
>npm install @vapi-ai/web
># with yarn
>yarn add @vapi-ai/web
># with pnpm
>pnpm add @vapi-ai/web
2

Import the SDK

Import the Vapi Web SDK package.

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

Get started

1

Create an assistant

Create an assistant object.

focus
1const assistantOptions = {
2 name: "Vapi's Pizza Front Desk",
3 firstMessage: "Vapi's Pizzeria speaking, how can I help you?",
4 transcriber: {
5 provider: "deepgram",
6 model: "nova-2",
7 language: "en-US",
8 },
9 voice: {
10 provider: "playht",
11 voiceId: "jennifer",
12 },
13 model: {
14 provider: "openai",
15 model: "gpt-4",
16 messages: [
17 {
18 role: "system",
19 content: `You are a voice assistant for Vappy's Pizzeria, a pizza shop located on the Internet.\n\nYour job is to take the order of customers calling in. The menu has only 3 types of items: pizza, sides, and drinks. There are no other types of items on the menu.\n\n1) There are 3 kinds of pizza: cheese pizza, pepperoni pizza, and vegetarian pizza (often called \"veggie\" pizza).\n2) There are 3 kinds of sides: french fries, garlic bread, and chicken wings.\n3) There are 2 kinds of drinks: soda, and water. (if a customer asks for a brand name like \"coca cola\", just let them know that we only offer \"soda\")\n\nCustomers can only order 1 of each item. If a customer tries to order more than 1 item within each category, politely inform them that only 1 item per category may be ordered.\n\nCustomers must order 1 item from at least 1 category to have a complete order. They can order just a pizza, or just a side, or just a drink.\n\nBe sure to introduce the menu items, don't assume that the caller knows what is on the menu (most appropriate at the start of the conversation).\n\nIf the customer goes off-topic or off-track and talks about anything but the process of ordering, politely steer the conversation back to collecting their order.\n\nOnce you have all the information you need pertaining to their order, you can end the conversation. You can say something like \"Awesome, we'll have that ready for you in 10-20 minutes.\" to naturally let the customer know the order has been fully communicated.\n\nIt is important that you collect the order in an efficient manner (succinct replies & direct questions). You only have 1 task here, and it is to collect the customers order, then end the conversation.\n\n- Be sure to be kind of funny and witty!\n- Keep all your responses short and simple. Use casual language, phrases like \"Umm...\", \"Well...\", and \"I mean\" are preferred.\n- This is a voice conversation, so keep your responses short, like in a real conversation. Don't ramble for too long.`,
20 },
21 ],
22 },
23};

Parameters:

  • name sets the display name for the assistant (internal use)
  • firstMessage is the first message the assistant says
  • transcriber selects the speech-to-text provider and model
  • voice selects the text-to-speech provider and voice
  • model sets the LLM provider, model, and system prompt
2

Make a call

Start a call using your assistant configuration.

focus
1vapi.start(assistantOptions);