Speak playground · React (Vite)

Speak playground — React (Vite)

This implementation is available in the repository. Fork it, run locally, and adapt the host UI around the same Experience speak / listen APIs.

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:

cd examples/speak-playground/react-vite
npm install
npm run dev
# http://localhost:4005

Local URL: http://localhost:4005

Liforma integration

Mount <Experience /> from @liforma/client/react:

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

<!-- experience-id comes from the selected lesson / session config -->
<liforma-experience experience-id="${lesson.experienceId}"></liforma-experience>

Key files

• SpeakWorkspace.tsx / SpeakApp.tsx — speech.speak({ queue }) integration
• lib/config.ts — experience id + demo lines

Related docs

• Embed an Experience
• Web Component reference
• Experience on Meet — hosted experience without the lesson app UI

Use the Liforma Speak playground React (Vite) example as source material.

Source repo folder: examples/speak-playground/react-vite

Start from `SpeakWorkspace.tsx` / `SpeakApp.tsx` — that is the speak() integration.

Preserve:
- `<Experience />` from `@liforma/client/react` in presenter mode with `speechInputMode="off"`
- import from `@liforma/client/react`
- `experience.speech.speak({ text, queue: 'append' | 'replace-active' })`
- Enqueue = `append`; Interrupt = `replace-active`; `AbortError` means interrupted
- TypeScript and normal CSS (no Tailwind)

Adapt:
- branding
- host UI
- experience id