> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vapi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboard

> Quickstart with the Vapi web dashboard.

export const YouTubeEmbed = ({videoUrl, altTitle}) => {
  return <Frame>

  <div class="video-embed-wrapper">
    <iframe src={videoUrl} title={`An embedded YouTube video titled \"${altTitle}\"`} 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>;
};

<YouTubeEmbed videoUrl="https://www.youtube.com/embed/sFXaTsmMR8s?si=aV-mAdjwkpHchHfT" altTitle="Quickstart: VAPI Dashboard" />

### The Web Dashboard

One of the easiest ways to get started with Vapi is by using the web dashboard.

<Note>You can visit your dashboard by going to [dashboard.vapi.ai](https://dashboard.vapi.ai)</Note>

The web dashboard gives you the ability to:

* **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)

We will be walking through the core necessities you need to get up and running in this guide.

<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>

## Vapi’s Pizzeria

In this guide we will be implementing a simple order-taking assistant at a pizza shop called “Vapi’s Pizzeria”.

Vapi’s has 3 types of menu items: `pizza`, `side`s, & `drink`s. Customers will be ordering 1 of each.

<Frame caption="Customers will order 3 items: 1 pizza, 1 side, & 1 drink. The assistant will handle the full order taking conversation.">
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/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>

<AccordionGroup>
  <Accordion title="Sign-up or Log-in to Vapi" icon="user-plus" iconType="solid">
    If you haven't already signed-up, you're going to need an account before you can use the web dashboard. When you visit [dashboard.vapi.ai](https://dashboard.vapi.ai) you may see something like this:

    <Frame>
      <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/auth-ui.png" />
    </Frame>

    Sign-up for an account (or log-in to your existing account) — you will then find yourself inside the web dashboard. It will look something like this:

    <Frame caption="Your dashboard may look a bit different if you already have an account with assistants in it. The main idea is that we’re in the dashboard now.">
      <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/vapi-dashboard-post-signup.png" />
    </Frame>
  </Accordion>

  <Accordion title="Create an Assistant" icon="layer-plus" iconType="solid">
    Now that you're in your dashboard, we're going to create an [assistant](/assistants).

    Assistants are at the heart of how Vapi models AI voice agents — we will be setting certain properties on a new assistant to model an order-taking agent.

    Once in the "Assistants" dashboard tab (you should be in it by-default after log-in), you will see a button to create a new assistant.

    <Frame caption="Ensure you are in the 'Assistants' dashboard tab, then this button will allow you to begin the assistant creation flow.">
      <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/create-new-assistant-button.png" />
    </Frame>

    After clicking the create new assistant button, you will see a pop-up modal that asks you to pick a starter template. For our example we will start from a blank slate so choose the `Blank Template` option.

    <Frame caption="Ensure you are in the 'Assistants' dashboard tab, then this button will allow you to begin the assistant creation flow.">
      <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/choose-blank-template.png" />
    </Frame>

    You will then be able to name your assistant — you can name it whatever you'd like (`Vapi’s Pizza Front Desk`, for example):

    <Info>
      This name is only for internal labeling use. It is not an identifier, nor will the assistant be
      aware of this name.
    </Info>

    <Frame caption="Name your assistant.">
      <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/name-your-assistant.png" />
    </Frame>

    Once you have named your assistant, you can hit "Create" to create it. You will then see something like this:

    <Frame caption="The assistant overview. You can edit your assistant’s transcriber, model, & voice — and edit other advanced configuration.">
      <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/assistant-created.png" />
    </Frame>

    This is the assistant overview view — it gives you the ability to edit different attributes about your assistant, as well as see **cost** & **latency** projection information for each portion of it’s voice pipeline (this is very important data to have handy when building out your assistants).
  </Accordion>

  <Accordion title="Model Setup" icon="microchip" iconType="solid">
    Now we’re going to set the "brains" of the assistant, the large language model. We're going to be using `GPT-4` (from [OpenAI](https://openai.com/)) for this demo (though you're free to use `GPT-3.5`, or any one of your favorite LLMs).

    <AccordionGroup>
      <Accordion title="Set Your OpenAI Provider Key (optional)" icon="key" iconType="solid">
        Before we proceed, we can set our [provider key](customization/provider-keys) for OpenAI (this is just your OpenAI secret key).

        <Note>
          You can see all of your provider keys in the "Provider Keys" dashboard tab. You can also go
          directly to [dashboard.vapi.ai/keys](https://dashboard.vapi.ai/keys).
        </Note>

        Vapi uses [provider keys](customization/provider-keys) you provide to communicate with LLM, TTS, & STT vendors on your behalf. It is most ideal that we set keys for the vendors we intend to use ahead of time.

        <Frame caption="We set our provider key for OpenAI so Vapi can make requests to their API.">
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/model-provider-keys.png" />
        </Frame>

        While we're here it'd be ideal for you to go & set up provider keys for other providers you're familiar with & intend to use later.
      </Accordion>

      <Accordion title="Set a First Message" icon="message" iconType="light">
        Assistants can **optionally** be configured with a `First Message`. This first message will be spoken by your assistant when either:

        * **A Web Call Connects:** when a web call is started with your assistant
        * **An Inbound Call is Picked-up:** an [inbound call](/glossary#inbound-call) is picked-up & answered by your assistant
        * **An Outbound Call is Dialed & Picked-up:** an [outbound call](/glossary#outbound-call) is dialed by your assistant & a person picks up

        <Warning>
          Note that this first message cannot be interrupted & is guaranteed to be spoken. Certain use cases
          need a first message, while others do not.
        </Warning>

        For our use case, we will want a first message. It would be ideal for us to have a first message like this:

        ```text
        Vappy’s Pizzeria speaking, how can I help you?
        ```

        <Info>
          Some text-to-speech voices may struggle to pronounce 'Vapi' correctly, compartmentalizing it to be
          spoken letter by letter "V. A. P. I."

          Some aspects of configuring your voice pipeline will require tweaks like this to get the target
          behaviour you want.
        </Info>

        This will be spoken by the assistant when a web or inbound phone call is received.
      </Accordion>

      <Accordion title="Set the System Prompt" icon="message" iconType="solid">
        We will now set the `System Prompt` for our assistant. If you're familiar with OpenAI's API, this is the first prompt in the message list that we feed our LLM (learn more about prompt engineering on the [OpenAI docs](https://platform.openai.com/docs/guides/prompt-engineering)).

        The system prompt can be used to configure the context, role, personality, instructions and so on for the assistant. In our case, a system prompt like this will give us the behaviour we want:

        ```text
        You are a voice assistant for Vappy’s Pizzeria,
        a pizza shop located on the Internet.

        Your 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.

        1) There are 3 kinds of pizza: cheese pizza, pepperoni pizza, and vegetarian pizza
        (often called "veggie" pizza).
        2) There are 3 kinds of sides: french fries, garlic bread, and chicken wings.
        3) 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")

        Customers 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.

        Customers 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.

        Be 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).

        If 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.

        Once 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.

        It 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.

        - Be sure to be kind of funny and witty!
        - Keep all your responses short and simple. Use casual language, phrases like "Umm...", "Well...", and "I mean" are preferred.
        - This is a voice conversation, so keep your responses short, like in a real conversation. Don't ramble for too long.
        ```

        You can copy & paste the above prompt into the `System Prompt` field. Now the model configuration for your assistant should look something like this:

        <Frame caption="Note how our model provider is set to OpenAI & the model is set to GPT-4.">
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/assistant-model-set-up.png" />
        </Frame>
      </Accordion>
    </AccordionGroup>
  </Accordion>

  <Accordion title="Transcriber Setup" icon="microphone" iconType="solid">
    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.

    <AccordionGroup>
      <Accordion title="Set Your Deepgram Provider Key (optional)" icon="key" iconType="solid">
        We will be using [Deepgram](https://deepgram.com) (which provides blazing-fast & accurate Speech-to-Text) as our STT provider.

        We will set our provider key for them in "Provider Keys":

        <Frame>
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/transcriber-providers-keys.png" />
        </Frame>
      </Accordion>

      <Accordion title="Set Transcriber" icon="language" iconType="solid">
        We will set the model to `Nova 2` & the language to `en` for English. Now your assistant's transcriber configuration should look something like this:

        <Frame caption="Note how our transcriber is set to 'deepgram', the model is set to 'Nova 2', & the language is set to English.">
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/assistant-transcriber-config.png" />
        </Frame>
      </Accordion>
    </AccordionGroup>
  </Accordion>

  <Accordion title="Voice Setup" icon="head-side-cough" iconType="solid">
    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 will be using a voice provider called [PlayHT](https://play.ht) (they have very conversational voices), & a voice provided by them labeled `Jennifer` (`female`, `en-US`).

    You are free to use your favorite TTS voice platform here. [ElevenLabs](https://elevenlabs.io/) is
    another alternative — by now you should get the flow of plugging in vendors into Vapi (add
    provider key + pick provider in assistant config).

    You can skip the next step(s) if you don't intend to use PlayHT.

    <AccordionGroup>
      <Accordion title="Set Your PlayHT Provider Key (optional)" icon="key" iconType="solid">
        If you haven't already, sign up for an account with PlayHT at [play.ht](https://play.ht). Since their flows are liable to change — you can just grab your `API Key` & `User ID` from them.

        <Frame>
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/voice-provider-keys.png" />
        </Frame>
      </Accordion>

      <Accordion title="Set Voice" icon="person" iconType="solid">
        You will want to select `playht` in the "provider" field, & `Jennifer` in the "voice" field. We will leave all of the other settings untouched.

        <Frame caption="Each voice provider offers a host of settings you can modulate to customize voices. Here we will leave all the defaults alone.">
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/assistant-voice-config.png" />
        </Frame>
      </Accordion>
    </AccordionGroup>
  </Accordion>
</AccordionGroup>

## 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="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/call-assistant-web-dashboard.png" />
    </Frame>

    <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">
        The quickest way to secure a phone number for your assistant is to purchase a phone number directly through Vapi.

        <Info>
          Ensure you have a card on file that Vapi can bill before proceeding, you can add your billing
          information in your dashboard at [dashboard.vapi.ai/billing](https://dashboard.vapi.ai/billing)
        </Info>

        Navigate to the "Phone Numbers" section & click the "Buy number" button:

        <Frame caption="Make sure you are in the 'Phone Numbers' dashboard tab.">
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/buy-a-phone-number.png" />
        </Frame>

        We will use the area code `415` for our phone number (these are area codes domestic to the US & Canada).

        <Frame caption="Choose an area code for your phone number.">
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/buy-phone-number-modal.png" />
        </Frame>

        <Info>
          Currently, only US & Canada phone numbers can be directly purchased through Vapi. Phone numbers in
          other regions must be imported, see our [phone calling](/phone-calling) guide.
        </Info>

        Click "Buy", after purchasing a phone number you should see something like this:

        <Frame caption="Here we can attach an assistant to the number for inbound calls (or perform an outbound call, with a select assistant).">
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/phone-number-config.png" />
        </Frame>

        The phone number is now ready to be used (either for inbound or outbound calling).
      </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`.

        <Frame caption="Your assistant will now pick-up calls made to this phone number.">
          <img src="https://mintlify.s3-us-west-1.amazonaws.com/vapi/static/images/quickstart/dashboard/inbound-assistant-set.png" />
        </Frame>

        This will put your assistant behind the phone number for inbound calls. Your assistant is now ready to take calls.
      </Accordion>
    </AccordionGroup>
  </Accordion>
</AccordionGroup>

Your assistant should be able to accept calls & maintain a basic conversation. Happy ordering!

<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>
