Guided practice — React (Vite)

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/guided-practice/react-vite
npm install
npm run dev
# http://localhost:4004

Local URL: http://localhost:4004

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

PracticeApp.tsx / workspace component — host UI and Experience APIs
lib/ — turns / feedback helpers when present

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 Guided practice React (Vite) example as source material.

Source repo folder: examples/guided-practice/react-vite

Preserve:
- React `Experience` / speak API usage shown in the example
- import from `@liforma/client/react`
- TypeScript and normal CSS (no Tailwind)

Adapt:
- branding
- host UI / turns
- experience id