|
1 | 1 | --- |
2 | | -title: Web Calling |
3 | | -subtitle: Get started with Vapi on the Web. |
4 | | -slug: quickstart/web |
| 2 | +title: Web Call |
| 3 | +subtitle: Learn to make a web call to your assistant |
5 | 4 | --- |
6 | 5 |
|
7 | | -<Frame> |
8 | | - <div class="video-embed-wrapper"> |
9 | | - <iframe |
10 | | - src="https://www.youtube.com/embed/PUb-cseRNr4?si=NP-GO8tU46hibfuW" |
11 | | - title='An embedded YouTube video titled "Quickstart: Web"' |
12 | | - frameborder="0" |
13 | | - allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
14 | | - allowfullscreen |
15 | | - referrerpolicy="strict-origin-when-cross-origin" |
16 | | - /> |
17 | | - </div> |
18 | | -</Frame> |
19 | | - |
20 | | -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. |
21 | | - |
22 | | -<CardGroup cols={2}> |
23 | | - <Card title="The Web SDK" icon="window" iconType="duotone" href="/sdk/web"> |
24 | | - Explore the full Vapi Web SDK. |
25 | | - </Card> |
26 | | - <Card |
27 | | - title="Live React Demo" |
28 | | - icon="arrow-up-right-from-square" |
29 | | - color="#f25130" |
30 | | - href="https://stackblitz.com/~/github.com/VapiAI/quickstart-react" |
31 | | - > |
32 | | - Follow along as you read. |
33 | | - </Card> |
34 | | -</CardGroup> |
| 6 | +## Overview |
35 | 7 |
|
36 | | -## Installation |
37 | | - |
38 | | -<Markdown src="../snippets/sdks/web/install-web-sdk.mdx" /> |
39 | | - |
40 | | -<Markdown src="../snippets/sdks/web/import-web-sdk.mdx" /> |
41 | | - |
42 | | -## Starting a Call |
43 | | - |
44 | | -Assistants can either be created on the fly (temporary) or created & persisted to your account (persistent). |
45 | | - |
46 | | -### Option 1: Temporary Assistant |
47 | | - |
48 | | -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. |
49 | | - |
50 | | -<AccordionGroup> |
51 | | - <Accordion title="Assistant Configuration" icon="brackets-curly" iconType="solid"> |
52 | | - Here are the options we will pass to `.start()`: |
53 | | - |
54 | | - ```javascript |
55 | | - const assistantOptions = { |
56 | | - name: "Vapi’s Pizza Front Desk", |
57 | | - firstMessage: "Vappy’s Pizzeria speaking, how can I help you?", |
58 | | - transcriber: { |
59 | | - provider: "deepgram", |
60 | | - model: "nova-2", |
61 | | - language: "en-US", |
62 | | - }, |
63 | | - voice: { |
64 | | - provider: "playht", |
65 | | - voiceId: "jennifer", |
66 | | - }, |
67 | | - model: { |
68 | | - provider: "openai", |
69 | | - model: "gpt-4", |
70 | | - messages: [ |
71 | | - { |
72 | | - role: "system", |
73 | | - content: `You are a voice assistant for Vappy’s Pizzeria, a pizza shop located on the Internet. |
74 | | -
|
75 | | - Your job is to take the order of customers calling in. The menu has only 3 types |
76 | | - of items: pizza, sides, and drinks. There are no other types of items on the menu. |
77 | | -
|
78 | | - 1) There are 3 kinds of pizza: cheese pizza, pepperoni pizza, and vegetarian pizza |
79 | | - (often called "veggie" pizza). |
80 | | - 2) There are 3 kinds of sides: french fries, garlic bread, and chicken wings. |
81 | | - 3) There are 2 kinds of drinks: soda, and water. (if a customer asks for a |
82 | | - brand name like "coca cola", just let them know that we only offer "soda") |
83 | | -
|
84 | | - Customers can only order 1 of each item. If a customer tries to order more |
85 | | - than 1 item within each category, politely inform them that only 1 item per |
86 | | - category may be ordered. |
| 8 | +You can use Vapi anywhere you run client-side JavaScript. This includes plain JavaScript, React, Next.js, and other web frameworks. |
87 | 9 |
|
88 | | - Customers must order 1 item from at least 1 category to have a complete order. |
89 | | - They can order just a pizza, or just a side, or just a drink. |
| 10 | +This guide shows you how to make a web call to your Vapi assistant. You can create an assistant using the [web SDK](/sdk/web) or the Vapi dashboard. |
90 | 11 |
|
91 | | - Be sure to introduce the menu items, don't assume that the caller knows what |
92 | | - is on the menu (most appropriate at the start of the conversation). |
| 12 | +<Note>See the full next.js [demo here on v0](https://v0.dev/chat/vapi-quickstart-nextjs-z3lv02T7Dd5). To try it live, follow these instructions:</Note> |
93 | 13 |
|
94 | | - If the customer goes off-topic or off-track and talks about anything but the |
95 | | - process of ordering, politely steer the conversation back to collecting their order. |
| 14 | +1. Fork the app in v0 |
| 15 | +2. Go to settings --> environment variables |
| 16 | +3. Create a new environment variable called `NEXT_PUBLIC_VAPI_API_KEY` |
| 17 | +4. Add your [public api key from the dashboard](https://dashboard.vapi.ai/org/api-keys)! |
96 | 18 |
|
97 | | - Once you have all the information you need pertaining to their order, you can |
98 | | - end the conversation. You can say something like "Awesome, we'll have that ready |
99 | | - for you in 10-20 minutes." to naturally let the customer know the order has been |
100 | | - fully communicated. |
101 | | -
|
102 | | - It is important that you collect the order in an efficient manner (succinct replies |
103 | | - & direct questions). You only have 1 task here, and it is to collect the customers |
104 | | - order, then end the conversation. |
105 | | -
|
106 | | - - Be sure to be kind of funny and witty! |
107 | | - - Keep all your responses short and simple. Use casual language, phrases like "Umm...", "Well...", and "I mean" are preferred. |
108 | | - - This is a voice conversation, so keep your responses short, like in a real conversation. Don't ramble for too long.`, |
109 | | - }, |
110 | | - ], |
111 | | - }, |
112 | | - }; |
113 | | - ``` |
114 | | - Let's break down the configuration options we passed: |
115 | | - |
116 | | - - **name:** the display name for the assistant in our dashboard (for internal purposes only) |
117 | | - - **firstMessage:** the first message that our assistant will say when it picks up the web call |
118 | | - - **transcriber:** the transcriber is what turns user speech into processable text for our LLM. This is the first step in the end-to-end voice pipeline. We are using Deepgram for transcription, specifically, their `Nova 2` model. We also set the language to be transcribed as English. |
119 | | - - **voice:** the final portion of the voice pipeline is turning LLM output-text into speech. This process is called "Text-to-speech" (or TTS for short). We use a voice provider called PlayHT, & a voice provided by them called `jennifer`. |
120 | | - - **model:** for our LLM, we use `gpt-4` (from OpenAI) & set our system prompt for the assistant. The system prompt configures the context, role, personality, instructions and so on for the assistant. In our case, the system prompt above will give us the behaviour we want. |
121 | | - |
122 | | - </Accordion> |
123 | | -</AccordionGroup> |
124 | | - |
125 | | -Now we can call `.start()`, passing the temporary assistant configuration: |
126 | | - |
127 | | -```javascript |
128 | | -vapi.start(assistantOptions); |
129 | | -``` |
130 | | - |
131 | | -More configuration options can be found in the [Assistant](/api-reference/assistants/create-assistant) API reference. |
132 | | - |
133 | | -### Option 2: Persistent Assistant |
134 | | - |
135 | | -If you want to create an assistant that you can reuse across multiple calls, you can create a persistent assistant in the [Vapi Dashboard](https://dashboard.vapi.ai). Here's how you can do that: |
136 | | - |
137 | | -<Markdown src="../snippets/quickstart/dashboard/assistant-setup-inbound.mdx" /> |
138 | | - |
139 | | -To customize additional fields, this can be done via the [Assistant](/api-reference/assistants/create-assistant) API instead. |
140 | | - |
141 | | -Then, you can copy the assistant's ID at the top of the assistant detail page: |
142 | | - |
143 | | -<Frame> |
144 | | - <img src="../static/images/quickstart/assistant-id-dashboard.png" /> |
145 | | -</Frame> |
146 | | - |
147 | | -Now we can call `.start()`, passing the persistent assistant's ID: |
148 | | - |
149 | | -```javascript |
150 | | -vapi.start("79f3XXXX-XXXX-XXXX-XXXX-XXXXXXXXce48"); |
151 | | -``` |
152 | | - |
153 | | -If you need to override any assistant settings or set template variables, you can pass `assistantOverrides` as the second argument. |
154 | | - |
155 | | -For example, if the first message is "Hello `{{name}}`", you can set `assistantOverrides` to replace `{{name}}` with `John`: |
156 | | - |
157 | | -```javascript |
158 | | -const assistantOverrides = { |
159 | | - transcriber: { |
160 | | - provider: "deepgram", |
161 | | - model: "nova-2", |
162 | | - language: "en-US", |
163 | | - }, |
164 | | - recordingEnabled: false, |
165 | | - variableValues: { |
166 | | - name: "John", |
167 | | - }, |
168 | | -}; |
| 19 | +## Installation |
169 | 20 |
|
170 | | -vapi.start("79f3XXXX-XXXX-XXXX-XXXX-XXXXXXXXce48", assistantOverrides); |
171 | | -``` |
| 21 | +<Steps> |
| 22 | + ### Install the SDK |
| 23 | + <Markdown src="../snippets/sdks/web/install-web-sdk.mdx" /> |
| 24 | + |
| 25 | + ### Import the SDK |
| 26 | + <Markdown src="../snippets/sdks/web/import-web-sdk.mdx" /> |
| 27 | +</Steps> |
| 28 | + |
| 29 | +## Get started |
| 30 | + |
| 31 | +<Tabs> |
| 32 | + <Tab title="Using the SDK"> |
| 33 | + <Steps> |
| 34 | + <Step title="Create an assistant"> |
| 35 | + Create an assistant object. |
| 36 | + |
| 37 | + ```javascript focus |
| 38 | + const assistantOptions = { |
| 39 | + name: "Vapi's Pizza Front Desk", |
| 40 | + firstMessage: "Vapi's Pizzeria speaking, how can I help you?", |
| 41 | + transcriber: { |
| 42 | + provider: "deepgram", |
| 43 | + model: "nova-2", |
| 44 | + language: "en-US", |
| 45 | + }, |
| 46 | + voice: { |
| 47 | + provider: "playht", |
| 48 | + voiceId: "jennifer", |
| 49 | + }, |
| 50 | + model: { |
| 51 | + provider: "openai", |
| 52 | + model: "gpt-4", |
| 53 | + messages: [ |
| 54 | + { |
| 55 | + role: "system", |
| 56 | + 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.`, |
| 57 | + }, |
| 58 | + ], |
| 59 | + }, |
| 60 | + }; |
| 61 | + ``` |
| 62 | + |
| 63 | + **Parameters:** |
| 64 | + - `name` sets the display name for the assistant (internal use) |
| 65 | + - `firstMessage` is the first message the assistant says |
| 66 | + - `transcriber` selects the speech-to-text provider and model |
| 67 | + - `voice` selects the text-to-speech provider and voice |
| 68 | + - `model` sets the LLM provider, model, and system prompt |
| 69 | + </Step> |
| 70 | + <Step title="Make a call"> |
| 71 | + Start a call using your assistant configuration. |
| 72 | + |
| 73 | + ```javascript focus |
| 74 | + vapi.start(assistantOptions); |
| 75 | + ``` |
| 76 | + </Step> |
| 77 | + </Steps> |
| 78 | + </Tab> |
| 79 | + <Tab title="In the dashboard"> |
| 80 | + <Steps> |
| 81 | + <Step title="Create an assistant in the dashboard"> |
| 82 | + To create an assistant in the dashboard, follow the step-by-step guide in the [Dashboard Quickstart](https://docs.vapi.ai/quickstart/dashboard#get-started). |
| 83 | + </Step> |
| 84 | + <Step title="Make a call with your assistant"> |
| 85 | + Once you have your assistant's ID, you can start a call with it: |
| 86 | + |
| 87 | + <Frame background="subtle"> |
| 88 | + <img src="/static/images/quickstart/assistant-id-dashboard.png" alt="Assistant ID in dashboard" /> |
| 89 | + </Frame> |
| 90 | + |
| 91 | + ```javascript |
| 92 | + vapi.start("YOUR_ASSISTANT_ID_FROM_THE_DASHBOARD"); |
| 93 | + ``` |
| 94 | + </Step> |
| 95 | + <Step title="Override assistant settings"> |
| 96 | + To override assistant settings or set template variables, pass an `assistantOverrides` object as the second argument. |
| 97 | + |
| 98 | + ```javascript |
| 99 | + const assistantOverrides = { |
| 100 | + transcriber: { |
| 101 | + provider: "deepgram", |
| 102 | + model: "nova-2", |
| 103 | + language: "en-US", |
| 104 | + }, |
| 105 | + recordingEnabled: false, |
| 106 | + variableValues: { |
| 107 | + name: "John", |
| 108 | + }, |
| 109 | + }; |
| 110 | + |
| 111 | + vapi.start("YOUR_ASSISTANT_ID_FROM_THE_DASHBOARD", assistantOverrides); |
| 112 | + ``` |
| 113 | + </Step> |
| 114 | + </Steps> |
| 115 | + </Tab> |
| 116 | +</Tabs> |
0 commit comments