#navbar {
  color: white;
  padding: 0px;
  text-align: center;
}
#navbar .flex-1.flex.items-center.gap-x-4 img {
  width: 169px;
  height: 48px;
}

#sidebar a {
  color: #19d8d8;
}

html:not(.dark) #sidebar a {
  color: #00b5cb;
}

a
  .mr-4
  .h-4.w-4.secondary-opacity.group-hover\:fill-primary-dark.group-hover\:bg-white.bg-gray-400.dark\:bg-gray-500 {
  color: #19d8d8;
  background-color: #19d8d8;
}

html:not(.dark)
  a
  .mr-4
  .h-4.w-4.secondary-opacity.group-hover\:fill-primary-dark.group-hover\:bg-white.bg-gray-400.dark\:bg-gray-500 {
  color: #00b5cb;
  background-color: #00b5cb;
}

.text-primary {
  color: #19d8d8 !important;
}

html:not(.dark) .text-primary {
  color: #00b5cb !important;
}

.text-primary-light {
  color: #19d8d8 !important;
}

html:not(.dark).text-primary-light {
  color: #00b5cb !important;
}

#header .eyebrow {
  color: #19d8d8;
}

#header a {
  color: #19d8d8;
}

#header a:hover {
  color: #19d8d8;
}

#topbar-cta-button .group .absolute {
  background-color: rgba(255, 255, 255, 0.862) !important;
  border: none !important;
  width: 150px !important;
  height: 38px !important;
  border-radius: 7px !important;
  font-weight: 500 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px  !important;
  transform: translate(-50%, -50%);

  text-align: center;
}

html:not(.dark) #topbar-cta-button .group .absolute {
  background: linear-gradient(to left, #014159, #012e42) !important;
  border: none !important;
  width: 150px !important;
  height: 38px !important;
  border-radius: 7px !important;
  width: 180px  !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
}

svg.h-5.rotate-0.overflow-visible.text-white\/90.dark\:text-primary-light {
  width: 6px;
  height: 48px;
  stroke-width: 0.5 !important;
}

html:not(.dark) #topbar-cta-button .group span {
  color: rgb(255, 255, 255) !important;
  font-size: medium !important;
  font-weight: bold !important;
}

html:not(.dark) #topbar-cta-button .group svg {
  color: rgb(255, 255, 255) !important;
}

#topbar-cta-button .group span {
  color: black !important;
  font-size: medium !important;
  font-weight: bold !important;
}

#topbar-cta-button .group svg {
  color: black !important;
}

.absolute.bottom-0.h-\[1\.5px\].w-full.bg-primary.dark\:bg-primary-light {
  background: #19d8d8;
}

.eyebrow.h-5.text-primary.dark\:text-primary-light.text-sm.font-semibold {
  border: 0px solid #19d8d8;
  padding: 20px 17px;
  background: linear-gradient(to bottom right, #1e2b34, #122029);
  border-radius: 5px;
  font-size: large;
  font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin-bottom: 20px;
  color: white !important;
}

.mt-12.lg\:mt-8 h5,
.mt-12.lg\:mt-8 li a div {
  color: white !important;
}
.mt-12.lg\:mt-8 li a {
  background: transparent !important;
}
.mt-12.lg\:mt-8 li a.active,
.mt-12.lg\:mt-8 li a:focus,
.mt-12.lg\:mt-8 li a:active {
  background-color: rgba(25, 216, 216, 0.3) !important;
  border-color: rgba(25, 216, 216, 0.3) !important;
  border: 1px solid #80dae5 !important ;
}

html:not(.dark) .mt-12.lg\:mt-8 h5 {
  color: black !important;
}

html:not(.dark) .mt-12.lg\:mt-8 li a div {
  color: black !important;
}

html:not(.dark)
  .eyebrow.h-5.text-primary.dark\:text-primary-light.text-sm.font-semibold {
  border: 0px solid #19d8d834;
  padding: 20px 17px;
  background: #e6f8fa;
  border-radius: 5px;
  border: 1px solid #80dae5;
  font-size: large;
  font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin-bottom: 20px;
  color: black !important;
}

.flex-1 a img.w-auto.h-7.relative.object-contain.block.dark\:hidden {
  width: 140px;
  height: 60px;
}

.flex-1 a img.w-auto.h-7.relative.object-contain.hidden.dark\:block {
  width: 140px;
  height: 60px;
}

.bg-background-light {
  background: #000f19 !important;
}

html:not(.dark) .bg-background-light {
  background-color: #ffffff !important;
}

.dark .whitespace-nowrap.font-medium.text-gray-600 {
  color: white !important;
}

html:not(.dark) .whitespace-nowrap.font-medium.text-gray-600 {
  color: black !important;
}

.prose.prose-gray.dark\:prose-invert {
  color: white !important;
  font-weight: 400;
}
html:not(.dark) .prose.prose-gray.dark\:prose-invert {
  color: black !important;
}

a.pl-4.group.flex.items-center.lg\:text-sm.lg\:leading-6.mb-5.sm\:mb-4.font-semibold.text-primary.dark\:text-primary-light {
  color: gray !important;
}

html:not(
    .dark
  )a.pl-4.group.flex.items-center.lg\:text-sm.lg\:leading-6.mb-5.sm\:mb-4.font-semibold.text-primary.dark\:text-primary-light {
  color: #505453 !important;
}

svg.h-4.w-4.secondary-opacity.group-hover\:fill-primary-dark.group-hover\:bg-white.bg-white {
  background-color: #19d8d8 !important;
  -webkit-mask-image: none;
  mask-image: none;
}

h1.inline-block.text-2xl.sm\:text-3xl.font-extrabold.text-gray-900.tracking-tight.dark\:text-gray-200 {
  font-weight: 500;
  font-size: 3rem;
  line-height: 55px;
  margin-bottom: 7px;
}
@media (max-width: 501px) {
  h1.inline-block.text-2xl.sm\:text-3xl.font-extrabold.text-gray-900.tracking-tight.dark\:text-gray-200 {
    font-weight: 500;
    font-size: 2.2rem;
    line-height: 45px;
    margin-bottom: 7px;
  }
}
span.cursor-pointer {
  font-weight: normal;
}

div.absolute.w-px {
  background: #19d8d8;
}

html:not(.dark) div.absolute.w-px {
  background: #19d8d8;
}

div.w-7.h-7.shrink-0 {
  border: 1px solid #303c44;
  background: #003645;
}

html:not(.dark) div.w-7.h-7.shrink-0 {
  background: #e6f8fa;
  border: 1px solid #00b5cb;
}

.not-prose .card:hover {
  border-color: #19d8d8 !important;
}

.h-6.w-6.fill-gray-800 svg {
  background: #19d8d8;
}

html:not(.dark) .not-prose .card:hover {
  border-color: #00b5cb !important;
}

html:not(.dark) .h-6.w-6.fill-gray-800 svg {
  background: #00b5cb;
}

.pb-16.w-full .flex.flex-row button {
  border: 3px solid #19d8d8;
  color: #19d8d8;
}

html:not(.dark) .pb-16.w-full .flex.flex-row button {
  border: 3px solid #00b5cb;
  color: #00b5cb;
}

.pb-16.w-full .flex.flex-row button svg {
  display: none;
}

.my-4.px-5.py-4.overflow-hidden.rounded-xl.flex.gap-3.border.border-amber-500\/20.bg-amber-50\/50.dark\:border-amber-500\/30.dark\:bg-amber-500\/10 {
  background-color: rgba(255, 165, 0, 0.086);
  border-color: rgba(255, 165, 0, 0.5);
  border-radius: 4px;
}

.text-sm.prose.min-w-0.text-amber-900.dark\:text-amber-200 {
  color: #e49047;
}

svg.flex-none.w-5.h-5.text-amber-400.dark\:text-amber-300\/80 {
  color: #e49047 !important;
}

.sticky.top-0.h-8.bg-gradient-to-b.from-background-light.dark\:from-background-dark {
  background: none !important;
}

.pl-4.mb-3\.5.lg\:mb-2\.5.font-semibold.text-gray-900.dark\:text-gray-200 {
  font-size: 1.3rem;
  font-weight: 300;
}

pre.language-python .token.function {
  color: white;
}

pre.language-python .token.comment {
  color: #60b485;
}

pre.language-python .token.keyword {
  color: #4bb6da;
}

pre.language-python .token.string {
  color: #e69248;
}

pre.language-bash .token.function {
  color: #e69248;
}

.font-bold.text-primary.dark\:text-primary-light {
  color: #6fcf97 !important;
}

.px-2.py-0\.5.rounded-md.bg-red-100\/50.dark\:bg-red-400\/10.text-red-600.dark\:text-red-300 {
  color: #d58843 !important;
}

html:not(.dark) .font-bold.text-primary.dark\:text-primary-light {
  color: #2f9d5e !important;
}

html:not(.dark)
  .px-2.py-0\.5.rounded-md.bg-red-100\/50.dark\:bg-red-400\/10.text-red-600.dark\:text-red-300 {
  color: #db7114 !important;
}

.flex-1.flex.content-start.py-0\.5.mr-5 {
  margin-top: -0.5rem !important;
  margin-bottom: -0.25rem !important;
}
#navigation-items div li {
  background: transparent;
  margin-bottom: 5px;
}

#navigation-items div li a {
  background: transparent;
  border: 1px solid transparent;
}

#navigation-items div li a:hover  {
  background: transparent;
  background-color: rgba(25, 216, 216, 0.3) !important;
  border: 1px solid #80dae5;
  /* border-radius: 8px; */
}

#table-of-contents
  div
  ul
  li
  .py-1.block.font-medium.-ml-px.text-primary.dark\:text-primary-light.border-l.border-primary.dark\:border-primary-light {
  color: white !important;
  border-bottom: 2px solid #19d8d8;
  transition: 0.3s linear ease-in-out;
}

html:not(.dark)
  #table-of-contents
  div
  ul
  li
  .py-1.block.font-medium.-ml-px.text-primary.dark\:text-primary-light.border-l.border-primary.dark\:border-primary-light {
  color: black !important;
  border-bottom: 2px solid #00b5cb;
  transition: 0.3s linear ease-in-out;
}

#content-container ol li a {
  border-bottom: 2px solid #19d8d8;
}

#content-container div div p a {
  border-bottom: 2px solid #19d8d8;
}

.text-sm.prose.min-w-0.text-sky-900 a {
  border-bottom: 2px solid #19d8d8;
}
.relative.mt-8.prose.prose-gray ul li a {
  border-bottom: 2px solid #19d8d8;
}

.flex.items-center.flex-wrap.gap-2 .font-bold.text-primary{
  color: #19d8d8 !important;
}
.mt-12 li div{
  color: white !important;
}

html:not(.dark) .mt-12 li div{
  color: black !important;
}
html:not(.dark) .ml-4.flex.text-sm.leading-6.whitespace-nowrap.min-w-0.space-x-3 div span{
  color: #000;
  font-weight: 600;
}

#content-area h2 code {
  color: #19d8d8;
}

html:not(.dark) #content-area h2 code {
  color: #00b5cb;
}


console.log("Hello world! from adapt docs javascript file");

Voice Agent Examples

Example Agents

Outspeed Docs

Build low-latency conversational applications on speech-to-speech models

Overview

Test out different speech-to-speech models with Voice DevTools

Voice DevTools

Leverage OpenAI Compatibility with Outspeed Live API

OpenAI Compatibility

Get started with the Outspeed React SDK for realtime voice AI applications

React SDK Setup

Build your first voice AI application with the Outspeed React SDK

React SDK Example

How to install and use the Outspeed Swift SDK for realtime voice conversations.

Swift SDK: Getting Started

How to migrate from ElevenLabs Swift SDK to Outspeed Swift SDK.

Swift SDK: ElevenLabs Compatibility

Build and deploy low-latency voice experiences with the Outspeed Live API

Outspeed Live API

These are the events that Realtime servers accept from the client

Client Events

Events that the Realtime WebRTC server accepts from the client

Server Events

Natural and emotive voice AI: Llama-4, custom VAD, Outspeed Whisper, and Fast Orpheus-3B TTS.

Outspeed AI

OpenAI Realtime API

Google's multimodal live streaming model (Coming Soon)

Gemini Multimodal Live (Coming Soon)

Quick Start - Simple Voice Bot

Guide to updating prompts and models for different LLM services in your voice bot.

Updating Prompts and Models

Guide to trying out and switching voices for your voice bot.

Switching Voices

A multilingual voice bot built using Outspeed in Python.

Guide to adding languages to your voice bot.

Adding Languages

A realtime voice bot that uses OpenAI Realtime API in Python.

Get Started

A guide on how to integrate and use tools in your realtime Voice Bot using OpenAI Realtime API.

Using Tools (Online Search)

A guide on integrating Retrieval-Augmented Generation (RAG) into your realtime Voice Bot using the OpenAI Realtime API.

RAG (LLamaIndex)

A guide on integrating Retrieval-Augmented Generation (RAG) into your realtime Voice Bot.

Using Online Search

A guide on how to integrate and use Cartesia TTS in your realtime Voice Bot using Outspeed.

Cartesia Integration

A guide on how to integrate and use Eleven Labs TTS in your realtime Voice Bot using Outspeed.

Eleven Labs Integration

A comprehensive guide on integrating the DeepReel Plugin into your Outspeed application to process audio input and generate video output using WebSockets.

Human Avatar (DeepReel)

Bring Your Own LLM

Installation

outspeed deploy

sp.App

sp.streaming_endpoint

sp.Tool

sp.CustomLLMNode

Introduction

Usage

The useWebRTC hook simplify the process of connecting to Outspeed’s WebRTC backend.

WebRTC

Connecting to a WebRTC backend

The useWebSocket hook simplify the process of connecting to Outspeed’s WebSocket backend.

Websocket

Connecting to a Websocket backend

A function to create config for `useWebRTC` hook.

createConfig

A hook to manage outspeed's WebRTC connection.

useWebRTC

A hook to manage outspeed's WebSocket connection.

useWebSocket

A hook that returns all the media devices connected to the system.

useAvailableMediaDevices

A hook that helps you build configuration for `useWebRTC`.

useCreateConfig

All necessary components to build forms to take user inputs.

Form

A component for managing local or remote audio track.

RealtimeAudio

A component for visualizating local or remote audio track.

RealtimeAudioVisualizer

A component for managing local or remote video track.

RealtimeVideo

A component for adding chat feature in you app.

Get Started

Web

iOS

API

Models

Example Agents

Voice Agent Examples

AI Girlfriend

Dental Agent

Get Started

Web

iOS

API

Models

​Voice Agent Examples

AI Girlfriend

Dental Agent

Voice Agent Examples