liforma examples

Deepgram Voice Agent embed · SvelteKit

Deepgram Voice Agent embed — SvelteKit

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/sveltekit
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 the Svelte component and pass one experience id:

embed
<script>
  import { Experience } from '@liforma/client/svelte';
</script>

<Experience experienceId="exp_01EXAMPLES_COFFEE_BARISTA" />

Key files

  • src/lib/helloByo.ts — copy into your product — startByoSpeech (thin SDK call)
  • src/routes/+page.svelte — demo scaffolding only (Connect / Start UI)
  • ../../shared/deepgram-agent-proxy.mjs — demo WS proxy
  • vite.config.ts — attaches WS proxy
Hosted notice View source on GitHub Framework overview

Related docs

AI agent prompt

Use the Liforma Deepgram Voice Agent embed SvelteKit example as source material.

Source repo folder: examples/deepgram-embed/sveltekit

Copy `src/lib/helloByo.ts` (`startByoSpeech` → `connectDeepgramAgent`) into your product — that is the integration.
`src/routes/+page.svelte` is demo scaffolding only; `src/lib/config.ts` is suggested agent Settings defaults.

Preserve:
- `<Experience />` from `@liforma/client/svelte` in presenter mode with `speechInputMode="off"`
- `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` (SvelteKit HTTP handlers cannot upgrade WebSockets)
- TypeScript and normal CSS (no Tailwind)

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