liforma examples

OpenAI Realtime embed · SvelteKit

OpenAI Realtime 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/openai-realtime-embed/sveltekit
npm install
npm run dev
# http://localhost:4007

Local URL: http://localhost:4007

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)
  • src/routes/api/…/+server.ts — demo credential mint
Live demo View source on GitHub Framework overview

Related docs

AI agent prompt

Use the Liforma OpenAI Realtime embed SvelteKit example as source material.

Source repo folder: examples/openai-realtime-embed/sveltekit

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

Preserve:
- `<Experience />` from `@liforma/client/svelte` in presenter mode with `speechInputMode="off"`
- `startByoSpeech(experience, { ephemeralKey, instructions })` after audio unlock (thin wrapper over `connectOpenAiRealtime`)
- ephemeral Realtime client secret minted on a server route (never ship OPENAI_API_KEY to production browsers)
- TypeScript and normal CSS (no Tailwind)

Adapt:
- branding
- experience id
- Realtime model / voice / instructions
- production ephemeral-secret backend