liforma examples

Deepgram Voice Agent embed · React (Vite)

Deepgram Voice Agent embed — React (Vite)

Runnable in repo

This is the hello-world integration. Fork it, run locally, and drop the same embed into your product shell.

Run locally

From the repo root, ./start runs all examples (or ./start sveltekit / ./start nextjs / ./start react-vite for those frameworks). To run only this one:

terminal
cd examples/deepgram-embed/react-vite
npm install
npm run dev
# http://localhost:4008

Local URL: http://localhost:4008

Experience id

The demo uses a single public experience id (exp_01EXAMPLES_COFFEE_BARISTA) written directly in the page.

Liforma integration

Import Experience from @liforma/client/react and pass one experience id:

embed
import { Experience } from '@liforma/client/react';

export function Demo() {
  return <Experience experienceId="exp_01EXAMPLES_COFFEE_BARISTA" />;
}

Key files

  • src/lib/helloByo.ts — copy into your product — startByoSpeech (thin SDK call)
  • src/DemoApp.tsx — demo scaffolding only (Connect / Start UI)
  • vite.config.ts — attaches WS proxy
View source on GitHub Framework overview

Related docs

AI agent prompt

Use the Liforma Deepgram Voice Agent embed React (Vite) example as source material.

Source repo folder: examples/deepgram-embed/react-vite

Copy `helloByo.ts` (`startByoSpeech` → `connectDeepgramAgent`) into your product — that is the integration.
`DemoApp.tsx` is demo scaffolding only.

Preserve:
- `<Experience />` from `@liforma/client/react` in presenter mode with `speechInputMode="off"`
- import from `@liforma/client/react`
- `startByoSpeech(experience, { proxyUrl, agent? })` after audio unlock (thin wrapper over `connectDeepgramAgent`)
- same-origin WebSocket proxy that adds `Authorization: Token …` upstream (browsers cannot set WS auth headers)
- Vite plugin attaching `shared/deepgram-agent-proxy.mjs` via `configureServer` / `configurePreviewServer`
- TypeScript and normal CSS (no Tailwind)

Adapt:
- branding
- experience id
- Deepgram agent Settings
- production WebSocket proxy backend