Spanish Tutor — SvelteKit

Runnable in repo

This implementation is available in the repository. Fork it, run locally, and adapt the lesson UI around the same Liforma web component embed.

Run locally

terminal

cd examples/spanish-tutor/sveltekit
npm install
npm run dev
# http://localhost:3007

Lesson data

Each lesson has its own experienceId in src/lib/lessons.ts (SvelteKit) or lessons.js (vanilla). Every ID maps to a Liforma Experience with a different scenario, location, and tutor prompt — for example café lessons use exp_01MEET_COFFEE_BARISTA.

Liforma integration

Load the CDN script and mount the experience custom element with the selected lesson's ID:

embed

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

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

Key files

src/lib/lessons.ts — lesson data and per-lesson experienceId
src/lib/components/LiformaEmbed.svelte — SDK loader + web component
src/routes/+page.svelte — lesson UI and close-before-switch flow

Try live demo View source on GitHub Framework overview

Related docs

Embed an Experience
Web Component reference
Live demo — hosted Spanish Tutor app (SvelteKit)
Avatar on Meet — hosted avatar experience without the lesson app UI

AI agent prompt

Use the Liforma Spanish Tutor example as source material to build a SvelteKit app.

Source repo folder: examples/spanish-tutor/sveltekit

Preserve:
- Liforma avatar embed via CDN web component (`<liforma-experience experience-id="..." />`)
- microphone permission guidance
- lesson selection with close-before-switch (no mid-session lesson change)
- learning goal card and session status
- transcript / session notes panel
- responsive layout
- per-lesson `experienceId` in lesson data (not environment variables)
- TypeScript and normal CSS (no Tailwind)

Adapt:
- branding
- lesson content
- avatar experience IDs per lesson
- surrounding product UI