Installation

npm install vocode

Or, start from our Replit template.

Usage

Setting up the conversation

Our self-hosted backend allows you to expose a websocket route that operates like StreamingConversation.

To get started, clone the Vocode repo or copy the client backend app directory.

Environment

Copy the .env.template and add your API keys.

cp .env.template .env

You’ll need:

  • Deepgram (for speech transcription)
  • OpenAI (for the underlying agent)
  • Azure (for speech synthesis)
DEEPGRAM_API_KEY=
OPENAI_API_KEY=
AZURE_SPEECH_KEY=
AZURE_SPEECH_REGION=

Running with Docker

From the client_backend directory:

docker build -t vocode-client-backend .
docker run --env-file=.env -p 3000:3000 -t vocode-client-backend

Running with Python

pip3 install vocode
uvicorn main:app --port 3000

You now have a server with a Vocode websocket route at localhost:3000! You can now use the useConversation hook with your self-hosted backend as follows:

import { useConversation } from "vocode";

const { status, start, stop, error, analyserNode } = useConversation({
  backendUrl: "<YOUR_BACKEND_URL>", // looks like ws://localhost:3000/conversation or wss://asdf1234.ngrok.app/conversation if using ngrok
  audioDeviceConfig: {},
});

Use the status, start, and stop objects within your React components to control conversations with your self-hosted backend, e.g.

<>
  {status === "idle" && <p>Press me to talk!</p>}
  {status == "error" && error && <p>{error.message}</p>}

  <button
    disabled={["connecting"].includes(status)}
    onClick={status === "connected" ? stop : start}
  ></button>
</>