/* for a grid of videos */

.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Spacing between videos */
}

.video-grid iframe,
.video-grid a {
  flex: 0 0 calc(50% - 20px); /* Flex grow is 0, basis is 50% minus the gap */
  aspect-ratio: 560 / 315; /* Maintain the aspect ratio of 16:9 */
  max-width: calc(50% - 20px); /* Max width is also set to 50% minus the gap */
  height: auto; /* Allow height to auto adjust based on aspect ratio */
}

.video-grid a {
  aspect-ratio: 1;
}

@media (max-width: 600px) {
  .video-grid iframe {
    flex: 0 0 100%; /* Flex grow is 0, basis is 100% */
    max-width: 100%; /* Allow max-width to be full width on mobile */
  }
}

.card-img {
  height: 200px;
  object-fit: contain;
  margin: auto;
  background: white; /*TODO: change color as per theme*/
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  text-align: center;
}

.card-content > h3 {
  margin: 16px 0 8px 0;
  font-size: 1.5em;
  text-align: center;
}

.card-content > p {
  font-size: 1em;
  text-align: center;
}


/* for a header video */

.video-embed-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.video-embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


"use client";

// Get the Mintlify search containers, going to reuse them as the triggers for Inkeep
const searchButtonContainerIds = [
  "search-bar-entry",
  "search-bar-entry-mobile",
];

// Clone and replace, needed to remove existing event listeners
const clonedSearchButtonContainers = searchButtonContainerIds.map((id) => {
  const originalElement = document.getElementById(id);
  const clonedElement = originalElement.cloneNode(true);

  originalElement.parentNode.replaceChild(clonedElement, originalElement);

  return clonedElement;
});

// Load the Inkeep script
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src =
  "https://unpkg.com/@inkeep/widgets-embed@0.2.265/dist/embed.js";
document.body.appendChild(inkeepScript);

// Once the Inkeep script has loaded, load the Inkeep chat components
inkeepScript.addEventListener("load", function () {
  // Customization settings
  const sharedConfig = {
    baseSettings: {
      apiKey: "a58574ddc0e41c75990d1c0e890ad3c8725dc9e7c8ee3d3e",
      integrationId: "clthv1rgg000sdjil26l2vg03",
      organizationId: "org_SGvQFUfKzrYkf8z8",
      primaryBrandColor: "#5DFECA",
    },
    aiChatSettings: {
      chatSubjectName: "Vapi",
      botAvatarSrcUrl:
        "https://storage.googleapis.com/organization-image-assets/vapi-botAvatarSrcUrl-1709929183314.png",
      botAvatarDarkSrcUrl:
        "https://storage.googleapis.com/organization-image-assets/vapi-botAvatarDarkSrcUrl-1709929110474.png",
      getHelpCallToActions: [
        {
          name: "Contact Us",
          url: "mailto:support@vapi.ai",
          icon: {
            builtIn: "IoMail",
          },
        },
      ],
      quickQuestions: [
        "What voices are supported?",
        "What languages are supported?",
        "How do I connect a custom LLM?",
        "How do I fetch the prompt dynamically?",
      ],
    },
  };

  // for syncing with dark mode
  const colorModeSettings = {
    observedElement: document.documentElement,
    isDarkModeCallback: (el) => {
      return el.classList.contains("dark");
    },
    colorModeAttribute: "class",
  };

  // add the "Ask AI" pill chat button
  Inkeep().embed({
    componentType: "ChatButton",
    colorModeSync: colorModeSettings,
    properties: sharedConfig,
  });

  // instantiate Inkeep "custom trigger" component
  const inkeepSearchModal = Inkeep({
    ...sharedConfig.baseSettings,
  }).embed({
    componentType: "CustomTrigger",
    colorModeSync: colorModeSettings,
    properties: {
      ...sharedConfig,
      isOpen: false,
      onClose: () => {
        inkeepSearchModal.render({
          isOpen: false,
        });
      },
      modalSettings: {
        onShortcutKeyPressed: () => {
          inkeepSearchModal.render({
            isOpen: true,
          });
        },
        shortcutKey: "k",
      }
    },
  });

  // When the Mintlify search bar clone is clicked, open the Inkeep search modal
  clonedSearchButtonContainers.forEach((trigger) => {
    trigger.addEventListener("click", function () {
      inkeepSearchModal.render({
        isOpen: true,
      });
    });
  });
});


Delete Tool

This is the operator you want to use to compare the parameter and value.

This is the name of the parameter that you want to check.

This is the value you want to compare against the parameter.

This is the description to help the model understand what it needs to output.

This is required if the type is "array". This is the schema of the items in the array.

This is of type JsonSchema. However, Swagger doesn't support circular references.

This is required if the type is "object". This specifies the properties of the object.

This is a map of string to JsonSchema. However, Swagger doesn't support circular references.

This is a list of properties that are required.

This only makes sense if the type is "object".

This is the type of output you'd like.

`string`, `number`, `integer`, `boolean` are the primitive types and should be obvious.

`array` and `object` are more interesting and quite powerful. They allow you to define nested structures.

For `array`, you can define the schema of the items in the array using the `items` property.

For `object`, you can define the properties of the object using the `properties` property.

This is the the name of the function to be called.

Must be a-z, A-Z, 0-9, or contain underscores and dashes, with a maximum length of 64.

These are the parameters the functions accepts, described as a JSON Schema object.

See the [OpenAI guide](https://platform.openai.com/docs/guides/function-calling) for examples, and the [JSON Schema reference](https://json-schema.org/understanding-json-schema) for documentation about the format.

Omitting parameters defines a function with an empty parameter list.

This provides a description of the properties required by the function.
JSON Schema can be used to specify expectations for each property.
Refer to [this doc](https://ajv.js.org/json-schema.html#json-data-type) for a comprehensive guide on JSON Schema.

This specifies the properties that are required by the function.

This must be set to 'object'. It instructs the model to return a JSON object containing the function call properties.

This is the secret you can set that Vapi will send with every request to your server. Will be sent as a header called x-vapi-secret.

Same precedence logic as server.

This is the timeout in seconds for the request to your server. Defaults to 20 seconds.

@default 20

This is an optional array of conditions that the tool call arguments must meet in order for this message to be triggered.

This is the content that the assistant says when this message is triggered.

This is an optional boolean that if true, the call will end after the message is spoken. Default is false.

This is ignored if `role` is set to `system`.

@default false

This is optional and defaults to "assistant".

When role=assistant, `content` is said out loud.

When role=system, `content` is passed to the model in a system message. Example:
    system: default one
    assistant:
    user:
    assistant:
    user:
    assistant:
    user:
    assistant: tool called
    tool: your server response
    <--- system prompt as hint
    ---> model generates response which is spoken
This is useful when you want to provide a hint to the model about what to say next.

This message is triggered when the tool call is complete.

This message is triggered immediately without waiting for your server to respond for async tool calls.

If this message is not provided, the model will be requested to respond.

If this message is provided, only this message will be spoken and the model will not be requested to come up with a response. It's an exclusive OR.

The number of milliseconds to wait for the server response before saying this message.

This message is triggered when the tool call is delayed.

There are the two things that can trigger this message:
1. The user talks with the assistant while your server is processing the request. Default is "Sorry, a few more seconds."
2. The server doesn't respond within `timingMilliseconds`.

This message is never triggered for async tool calls.

This is an optional boolean that if true, the call will end after the message is spoken. Default is false.

@default false

This message is triggered when the tool call fails.

This message is never triggered for async tool calls.

If this message is not provided, the model will be requested to respond.

If this message is provided, only this message will be spoken and the model will not be requested to come up with a response. It's an exclusive OR.

This message is triggered when the tool call starts.

This message is never triggered for async tools.

If this message is not provided, one of the default filler messages "Hold on a sec", "One moment", "Just a sec", "Give me a moment" or "This'll just take a sec" will be used.

This is the assistant to transfer the call to.

This is the description of the destination, used by the AI to choose when and how to transfer the call.

This is the message to say before transferring the call to the destination.

If this is not provided and transfer tool messages is not provided, default is "Transferring the call now".

If set to "", nothing is spoken. This is useful when you want to silently transfer. This is especially useful when transferring between assistants in a squad. In this scenario, you likely also want to set `assistant.firstMessageMode=assistant-speaks-first-with-model-generated-message` for the destination assistant.

This is the mode to use for the transfer. Default is `rolling-history`.

- `rolling-history`: This is the default mode. It keeps the entire conversation history and appends the new assistant's system message on transfer.

  Example:

  Pre-transfer:
    system: assistant1 system message
    assistant: assistant1 first message
    user: hey, good morning
    assistant: how can i help?
    user: i need help with my account
    assistant: (destination.message)

  Post-transfer:
    system: assistant1 system message
    assistant: assistant1 first message
    user: hey, good morning
    assistant: how can i help?
    user: i need help with my account
    assistant: (destination.message)
    system: assistant2 system message
    assistant: assistant2 first message (or model generated if firstMessageMode is set to `assistant-speaks-first-with-model-generated-message`)

- `swap-system-message-in-history`: This replaces the original system message with the new assistant's system message on transfer.

  Example:

  Pre-transfer:
    system: assistant1 system message
    assistant: assistant1 first message
    user: hey, good morning
    assistant: how can i help?
    user: i need help with my account
    assistant: (destination.message)

  Post-transfer:
    system: assistant2 system message
    assistant: assistant1 first message
    user: hey, good morning
    assistant: how can i help?
    user: i need help with my account
    assistant: (destination.message)
    assistant: assistant2 first message (or model generated if firstMessageMode is set to `assistant-speaks-first-with-model-generated-message`)

This is the extension to dial after transferring the call to the `number`.

This is the phone number to transfer the call to.

This is the flag to toggle the E164 check for the `number` field. This is an advanced property which should be used if you know your use case requires it.

Use cases:
- `false`: To allow non-E164 numbers like `+001234567890`, `1234', or `abc`. This is useful for dialing out to non-E164 numbers on your SIP trunks.
- `true` (default): To allow only E164 numbers like `+14155551234`. This is for most standard PSTN calls.

If `false`, the `number` is still required to only contain alphanumeric characters (regex: `/^\+?[a-zA-Z0-9]+$/`).

@default true (E164 check is enabled)

This is the SIP URI to transfer the call to.

bearer

DtmfTool

EndCallTool

FunctionTool

GhlTool

MakeTool

TransferCallTool

Vapi

bolt

gauge

discord

github

webhook

Quickstart

API Reference

Dashboard

Community

GitHub

Home

Pricing

Status

Changelog

Support

Vapi is the Voice AI platform for developers.

Introduction

The three core components to Vapi's voice AI pipeline.

Core Models

All the fancy stuff Vapi does on top of the core models.

Orchestration Models

Learn how to create and integrate custom knowledge bases into your voice AI assistants.

Knowledge Base

Creating Custom Knowledge Bases for Your Voice AI Assistants

Overview

Pricing Overview

Learn more about how your Vapi account is billed for provider expenses.

Cost Routing

Billing Limits

Get information on your voice pipeline's projected costs.

Estimating Costs

End-to-end examples estimating voice workflow cost on Vapi.

Billing Examples

Vapi Enterprise

On-Prem Deployments

New features, improvements, and fixes every few days

We are open to all kinds of help inquiry, feedback and feature request, help inquiry.

Quickstart handling inbound calls with Vapi.

Inbound Calling

Quickstart sending outbound calls with Vapi.

Outbound Calling

Web Calling

Client SDKs

Integrate Vapi into your web application.

Web SDK

Easily integrate the Vapi Voice Widget into your website for enhanced user interaction.

Web Snippet

Let's build an outbound sales agent that can schedule appointments.

Outbound Sales

Outbound Sales Example 📞

Let's build a technical support assistant that remembers where we left off.

Inbound Support

Inbound Support Example ⚙️

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

Pizza Website

Pizza Website Example 🍕

Some sample code for placing an outbound call using Python

Python Outbound Snippet

Outbound Calls from Python 📞

Code Resources

Provider Keys

Fine-tuned OpenAI models

Custom LLM

Connecting Your Custom LLM to Vapi: A Comprehensive Guide

Use Custom Voice with your favourite provider instead of the preset ones.

Quickstart: Setup Elevenlabs Custom Voice

Elevenlabs

PlayHT

Custom Keywords

Learn how to set up and test multilingual support in Vapi.

Multilingual

JWT Authentication

Speech Configuration

The core building-block of voice agents on Vapi.

Additional Capabilities for Your Assistants 

Function Calling

Persistent Assistants

Vapi makes it easy to personalize an assistant's messages and prompts using variables, allowing each call to be customized.

Dynamic Variables

At the end of the call, you can summarize and evaluate how it went.

Call Analysis

Vapi SDK lets you silently update the chat history through efficient text message integration. This is particularly useful for background tasks or discreetly logging user interactions.

Assistants

Calls

Phone Numbers

Files

Squads

Tools

Analytics

Server and Client

Delete Tool

Authorizations

Path Parameters

Response