New dashboard quickstart

Author: elizabethtrykin

fern/quickstart/dashboard.mdx

@@ -1,117 +1,128 @@
 ---
 title: Dashboard
-subtitle: Quickstart with the Vapi web dashboard.
+subtitle:  Learn to build a voice agent in under 5 minutes.
 slug: quickstart/dashboard
 ---
 
-<Frame>
-  <div class="video-embed-wrapper">
-    <iframe
-      src="https://www.youtube.com/embed/sFXaTsmMR8s?si=aV-mAdjwkpHchHfT"
-      title='An embedded YouTube video titled "Quickstart: Vapi Dashboard"'
-      frameborder="0"
-      allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      allowfullscreen
-      referrerpolicy="strict-origin-when-cross-origin"
-    />
-  </div>
-</Frame>
+## Overview
 
-### The Web Dashboard
+Vapi makes it easy to build end-to-end voice agents, which we call ***assistants***. Assistants support live, two-way conversations. You can call an assistant or have it call you. 
 
-One of the easiest ways to get started with Vapi is by using the web dashboard.
+Each assistant is powered by three components:
 
-<Note>
-You can visit your dashboard by going to [dashboard.vapi.ai](https://dashboard.vapi.ai)
-</Note>
+- Speech-to-text (STT)
+- Language model (LLM)
+- Text-to-speech (TTS)
 
-The web dashboard gives you the ability to:
+Vapi gives you full control over each, with dozens of providers and models to choose from.
 
-- **view, create, & modify [assistants](/assistants)** associated with your account
-- **provision & manage phone numbers** assistants can dial outbound from or receive inbound calls to
-- **review conversation data** (such as audio recordings, call metadata, etc)
-- **manage your [provider keys](/customization/provider-keys)** (used in communication with external [TTS](/glossary#tts), LLM, & [STT](/glossary#stt) vendors)
+In this quickstart, you’ll learn to:
+- Create an assistant in the Vapi dashboard
+- Pick your STT, LLM, and TTS providers
+- Attach a phone number
+- Make your first call over the web or by phone
 
-We will be walking through the core necessities you need to get up and running in this guide.
+## Prerequisites
 
-<Tip>
-  The web dashboard wraps over much of the realtime call functionality of Vapi. The dashboard
-  actually uses the [web SDK](/sdk/web) beneath-the-hood to make web calls.
-</Tip>
+- [A Vapi account](https://dashboard.vapi.ai)
 
-## Vapi’s Pizzeria
+## Get started
 
-In this guide we will be implementing a simple order-taking assistant at a pizza shop called “Vapi’s Pizzeria”.
+<Steps>
+  <Step title="Open the Vapi Dashboard">
+    Go to [dashboard.vapi.ai](https://dashboard.vapi.ai) and log in to your account.
+  </Step>
 
-Vapi’s has 3 types of menu items: `pizza`, `side`s, & `drink`s. Customers will be ordering 1 of each.
+  <Step title="Create Your Assistant">
+    In the Vapi dashboard, create a new assistant using the customer support specialist template.
 
-<Frame caption="Customers will order 3 items: 1 pizza, 1 side, & 1 drink. The assistant will handle the full order taking conversation.">
-  <img src="../static/images/quickstart/vapis-pizzeria.png" />
-</Frame>
-
-## Assistant Setup
-
-First we're going to set up our assistant in the dashboard. Once our assistant’s **transcriber**, **model**, & **voice** are set up, we can call it to place our order.
-
-<Note>
-You can visit your dashboard at [dashboard.vapi.ai](https://dashboard.vapi.ai/)
-</Note>
-
-<Markdown src="../snippets/quickstart/dashboard/assistant-setup-inbound.mdx" />
-
-## Calling Your Assistant
-
-Now that your assistant is fully setup & configured, we will want to contact it. There are 2 ways to "call in" to an assistant:
-
-- **Over the Internet:** Network-enabled devices can contact Vapi via the Internet (i.e. web applications, mobile applications). No phone number is involved.
-- **Via Telephony:** Phones can communicate to Vapi over a cellular network (i.e. phone call). One phone number dials to another phone number.
-
-For our use case, it is most appropriate that customers will contact our assistant via an inbound
-phone call. Though, we will look at both ways of calling in.
-
-<AccordionGroup>
-  <Accordion title="Call in the Dashboard" icon="camera-web" iconType="solid">
-    The quickest way to contact your new assistant is by simply using the call button on the assistant detail page:
-
-    <Frame caption="Call into your assistant via the dashboard.">
-      <img src="../static/images/quickstart/dashboard/call-assistant-web-dashboard.png" />
+    <Frame caption="Creating a new assistant">
+      <img src="../static/gifs/create-assistant.gif" />
     </Frame>
+  </Step>
+
+  <Step title="Configure your assistant">
+    <Steps>
+      <Step title="First message">
+        Set the first message that the assistant will speak when a conversation is started with it.
+
+        ```plaintext First message
+        Hi there, this is Alex from TechSolutions customer support. How can I help you today?
+        ```
+      </Step>
+
+      <Step title="System prompt">
+        Set the system prompt, which sets the context, role, personality and instructions that will guide your assistant.
+
+        ```plaintext System Prompt
+        You are Alex, a customer service voice assistant for TechSolutions. Your primary purpose is to help customers resolve issues with their products, answer questions about services, and ensure a satisfying support experience.
+        - Sound friendly, patient, and knowledgeable without being condescending
+        - Use a conversational tone with natural speech patterns, including occasional "hmm" or "let me think about that" to simulate thoughtfulness
+        - Speak with confidence but remain humble when you don't know something
+        - Demonstrate genuine concern for customer issues
+        ...
+        ```
+      </Step>
+    </Steps>
+  </Step>
+
+  <Step title="Configure the models for your assistant">
+    <Steps>
+      <Step title="Set the LLM (large language model)">
+        Select your preferred provider and the large language model (LLM) that will power your assistant (default gpt-4o).
+
+        <Frame>
+          <img src="../static/images/quickstart/dashboard/set-llm.png" />
+        </Frame>
+      </Step>
 
-    <Tip>The dashboard uses the [web SDK](/sdk/web) underneath to make web calls.</Tip>
-
-    This will start a web call with your assistant, you can now speak to it to order your pizza & sides!
-
-  </Accordion>
-  <Accordion title="Call via Phone" icon="phone-arrow-up-right" iconType="solid">
-    Since our assistant is meant to take orders over the phone, we will want to set up [inbound calling](/phone-calling) to our assistant. We will need to do 2 things:
-
-    1. **provision a new phone number** to sit our agent behind (it will pick-up calls that come in — hence "inbound calling")
-    2. **place our agent behind that phone number**
-
-    If you already have your own phone numbers (purchased via Twilio or Vonage, etc), you can import
-    them into Vapi for use. Learn more about [telephony](/phone-calling) on Vapi.
-
-    <AccordionGroup>
-      <Accordion title="Provision a Phone Number" icon="hashtag" iconType="solid">
-        <Markdown src="../snippets/quickstart/dashboard/provision-phone-number-with-vapi.mdx" />
-      </Accordion>
-      <Accordion title="Attach Your Assistant" icon="user-robot" iconType="solid">
-        In the `Inbound` area of the phone number detail view, select your assistant in the dropdown under `Assistant`.
+      <Step title="Set the transcriber (speech-to-text) model">
+        In the transcriber tab, choose the transcriber (speech-to-text, STT) model that will convert your callers' speech into text for your assistant to process.
 
-        <Frame caption="Your assistant will now pick-up calls made to this phone number.">
-          <img src="../static/images/quickstart/dashboard/inbound-assistant-set.png" />
+        <Frame>
+          <img src="../static/images/quickstart/dashboard/set-transcriber.png" />
         </Frame>
 
-        This will put your assistant behind the phone number for inbound calls. Your assistant is now ready to take calls.
-      </Accordion>
-    </AccordionGroup>
+        <Tip>
+          Vapi was made for model selection to be configurable - try playing around with different models!
+        </Tip>
+      </Step>
 
-  </Accordion>
-</AccordionGroup>
-
-Your assistant should be able to accept calls & maintain a basic conversation. Happy ordering!
+      <Step title="Choose the voice (text-to-speech) model">
+        In the voice tab, select the voice (TTS) model that will determine how your assistant sounds to callers.
+        
+        <Frame>
+          <img src="../static/images/quickstart/dashboard/set-voice.png" />
+        </Frame>
 
-<Tip>
-  Your assistant won't yet be able to hang-up the phone at the end of the call. We will learn more
-  about configuring call end behaviour in later guides.
-</Tip>
+        Just like with the transcriber, you can plug in any provider!
+      </Step>
+    </Steps>
+  </Step>
+</Steps>
+
+## Call your assistant
+<Steps>
+  <Step title="Call your assistant in the dashboard">
+    Try calling your assistant by clicking the call button in the dashboard.
+    <Frame>
+      <img src="../static/gifs/dashboard-call.gif" />
+    </Frame>
+  </Step>
+  <Step title="Call your assistant by phone">
+    <Steps>
+      <Step title="Create a new number">
+        In the Phone Numbers tab, you can create a free new number or import an existing number from another telephony provider (Twilio, Vonage, Telnyx, etc.).
+        <Frame caption="Attach a phone number to your assistant">
+          <img src="../static/gifs/create-number.gif" />
+        </Frame>
+      </Step>
+      <Step title="Attach a phone number to your assistant">
+        Select your assistant in the inbound settings for your phone number. Whenever this number is called, your assistant will pick up and have a conversation with them!
+        <Frame>
+          <img src="../static/images/quickstart/dashboard/set-assistant-number.png" />
+        </Frame>
+      </Step>
+    </Steps>
+  </Step>
+</Steps>