liforma examples

Deepgram Voice Agent embed · Vanilla HTML

Deepgram Voice Agent embed — Vanilla HTML

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/vanilla
npx serve . -l tcp://localhost:4008
# 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

Load the CDN script and mount the web component with one experience id:

embed
<script src="https://cdn.liforma.ai/sdk/v2/client.js"><\/script>

<liforma-experience experience-id="exp_01EXAMPLES_COFFEE_BARISTA"></liforma-experience>

Key files

  • helloByo.js — copy the npm pattern from docs — vanilla wraps bridge.js
  • app.js — demo scaffolding only
  • bridge.js — CDN port of the SDK helper
  • server.mjs — demo mint / proxy
View source on GitHub Framework overview

Related docs

AI agent prompt

Use the Liforma Deepgram Voice Agent embed example as source material to build a vanilla HTML app.

Source repo folder: examples/deepgram-embed/vanilla

Copy `helloByo.js` (`startByoSpeech`) — thin wrapper over `bridge.js` / `connectDeepgramAgent`.
`app.js` is demo scaffolding only. Prefer `@liforma/client/deepgram` in bundled apps.

Preserve:
- CDN script: https://cdn.liforma.ai/sdk/v2/client.js
- `Experience.startSession` in presenter mode with `speechInputMode: 'off'`
- Deepgram Voice Agent → Liforma bridge (pipe PCM + transcript into createUtterance)
- same-origin WebSocket proxy (`server.mjs` + `shared/deepgram-agent-proxy.mjs`) — never ship Deepgram API keys to production browsers as WS Authorization

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