This open source project demonstrates how to build a real-time voice agent using Layercode Voice Pipelines, with a React frontend (Vite + TypeScript).
Read the companion guides:
- Browser-based Voice Interaction: Users can speak to the agent directly from their browser.
-
Frontend:
Uses@layercode/react-sdkto connect the browser's microphone and speaker to a Layercode voice pipeline. Connections must be authenticated with a client session key, which is generated by an/api/authorizeroute on your backend. The React SDK handles calling this route for you. -
Transcription & Webhook:
Layercode transcribes user speech. For each complete message, it sends a webhook containing the transcribed text to your backend (see backend guide). -
Backend & Streaming:
Your backend receives the transcription, generates a response using an LLM, and streams the response back to Layercode, which converts it to speech and plays it in the browser in real time.
Note: Layercode needs to send a webhook to your backend to generate agent responses. If you're running the backend locally, you'll need to set up a tunnel to your localhost. See the backend guide for details.
- Clone this repository.
- Install dependencies with
npm install. - Run the development server with
npm run dev. - Open http://localhost:5173 in your browser and start speaking to your voice agent!
Layercode supports multiple turn-taking modes which are configured in the Transcriber settings of your voice pipeline in the Layercode dashboard. By default this example uses automated turn taking (which is the default for voice pipelines).
Push-to-talk is an alternative mode, where the user must hold the button down to speak. To enable this, go to the Transcriber settings of your voice pipeline in the Layercode dashboard and set the Turn Taking Mode to "Push-to-talk".
Then edit src/App.tsx and change the VoiceAgent component to use the VoiceAgentPushToTalk component. Now the user's speech will only be transcribed when the button is held down (or spacebar is pressed).
MIT