#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: 300;
}
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;
}

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

Resources

Props

Join Discord Community

Book a Demo

Outspeed Docs

Examples

Outspeed Python SDK

Outspeed JS SDK

Outspeed React  SDK

Raise an Issue

Support

A component for adding chat feature in you app.

RealtimeChat

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.

Overview

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.

Getting Started

@outspeed/react

@outspeed/react-native

Next.js / Vercel

RealtimeChat

Props

Resources

RealtimeChat

Getting Started

@outspeed/react

@outspeed/react-native

Next.js / Vercel

​Props

​Resources

RealtimeChat

Props

Resources