Speak playground — Next.js

Runnable in repo

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:

terminal

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

Local URL: http://localhost:4005

Liforma integration

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

embed

<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

View source on GitHub Framework overview

Related docs

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

AI agent prompt

Use the Liforma Speak playground Next.js App Router example as source material.

Source repo folder: examples/speak-playground/nextjs

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

Preserve:
- `<Experience />` from `@liforma/client/react` in presenter mode with `speechInputMode="off"`
- `'use client'` on the Experience mount component
- import from `@liforma/client/react` (not `/next` — that export is the session-route helper)
- `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