Pizza Website Example 🍕

Let’s build a pizza ordering assistant for our website.

In this example, we’ll be using the Web SDK to create an assistant that can take a pizza order. Since all the Client SDKs have equivalent functionality, you can use this example as a guide for any Vapi client.

We want to add a button to the page to start a call, update our UI with the call status, and display what the user’s saying while they say it. When the user mentions a topping, we should add it to the pizza. When they’re done, we should redirect them to checkout.

1. Create an assistant

   We’ll start by taking a look at the Assistant API reference and define our assistant:

   {
     "model": {
       "provider": "openai",
       "model": "gpt-4",
       "messages": [
         {
             "role": "system",
             "content": "You're a pizza ordering assistant. The user will ask for toppings, you'll add them. When they're done, you'll redirect them to checkout."
         }
       ],
       "functions": [
         {
           "name": "addTopping",
           "description": "Used to add a topping to the pizza.",
           "parameters": {
             "type": "object",
             "properties": {
               "topping": {
                 "type": "string",
                 "description": "The name of the topping. For example, 'pepperoni'."
               }
             }
           }
         },
          {
           "name": "goToCheckout",
           "description": "Redirects the user to checkout and order their pizza.",
           "parameters": {"type": "object", "properties": {}}
         }
       ]
     },
     "firstMessage": "Hi, I'm the pizza ordering assistant. What toppings would you like?",
   }
   

   Let’s break this down:

   • model - We’re using the OpenAI GPT-4 model, which is better at function calling.
   • messages - We’re defining the assistant’s instructions for how to run the call.
   • functions - We’re providing a addTopping function with a topping parameter. The assistant can call this during the conversation to add a topping. We’re also adding goToCheckout, with an empty parameters object. The assistant can call this to redirect the user to checkout.
   • firstMessage - This is the first message the assistant will say when the user starts the call.

   We’ll then make a POST request to the Create Assistant endpoint to create the assistant.

2. Set up the Web SDK

   We’ll follow the README for the Web SDK to get it installed.

   We’ll then get our Public Key from the Vapi Dashboard and initialize the SDK:

   import Vapi from '@vapi-ai/web';
   
   const vapi = new Vapi('your-web-token');
   
3. Add the call buttons

   We’ll add a button to the page that starts the call when clicked:

   <button id="start-call">Start Call</button>
   <button id="stop-call">Stop Call</button>
   

   const startCallButton = document.getElementById('start-call');
   
   startCallButton.addEventListener('click', async () => {
     await vapi.start('your-assistant-id');
   });
   
   const stopCallButton = document.getElementById('stop-call');
   
   stopCallButton.addEventListener('click', async () => {
     await vapi.stop();
   });
   
4. Handle call status events

   vapi.on('call-start', () => {
     // Update UI to show that the call has started
   });
   
   vapi.on('call-end', () => {
     // Update UI to show that the call has ended
   });
   
5. Handle speaking events

   vapi.on('speech-start', () => {
     // Update UI to show that the assistant is speaking
   });
   
   vapi.on('speech-end', () => {
   // Update UI to show that the assistant is done speaking
   });
   
   
6. Handle transcription events

   All messages send to the Server URL, including transcript and function-call messages, are also sent to the client as message events. We’ll need to check the type of the message to see what type it is.

   vapi.on("message", (msg) => {
   if (msg.type !== "transcript") return;
   
   if (msg.transcriptType === "partial") {
     // Update UI to show the live partial transcript
   }
   
   if (msg.transcriptType === "final") {
     // Update UI to show the final transcript
   }
   });
   
7. Handle function call events

   vapi.on('message', (msg) => {
     if(msg.type !== "function-call") return;
   
     if(msg.functionCall.name === "addTopping"){
       const topping = msg.functionCall.parameters.topping;
       // Add the topping to the pizza
     }
   
     if(msg.functionCall.name === "goToCheckout"){
       // Redirect the user to checkout
     }
   
   });
   
   
8. Order your pizza!

   You should now have a working pizza ordering assistant! 🍕