"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,
        });
      },
    },
  });

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


The Challenges of LLM Conversation

Introduction

Framing the Problem

Quickstart

Dashboard

Community

GitHub

Vapi

API Reference

Home

Pricing

Status

Support

A background on the challenges of implementing realtime LLM-based human conversation.

Implementing Realtime Conversation

Vapi is the Voice AI platform for developers.

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

Frequently Asked Questions

Resources

Learn the core concepts of getting started with Vapi.

Vapi is an end-to-end platform for building voice assistants: API, Dasboard, and and fully Customizable.

Assistants

Learn how to create and configure phone numbers with Vapi.

Phone Numbers

Client SDKs

Learn how to set up your server to receive and respond to messages from Vapi.

Server URL

Set up your Server URL

Provider Keys

Custom LLMs

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

Custom Voice

Additional Capabilities for Your Assistants 

Call Functions

Persistent Assistants

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 🍕

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.

Silent Text Messages

Silent Text Messages Logging

Some sample code for placing an outbound call using Python

Python Outbound Calls

Outbound Calls from Python 📞

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

Welcome

Get Started

Concepts

Example Workflows

Guides

Platform

Knowledge

Legal

Implementing Realtime Conversation

The Challenges of LLM Conversation

Introduction

Framing the Problem

Welcome

Get Started

Concepts

Example Workflows

Guides

Platform

Knowledge

Legal

​The Challenges of LLM Conversation

​Introduction

​Framing the Problem

The Challenges of LLM Conversation

Introduction

Framing the Problem