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

Environment

Copy .env.example to .env in the SvelteKit app. Phase 1 lessons use exp_01DEMO1SPANISHCAFE.

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/v1/client.js"><\/script>

<liforma-experience experience-id="exp_01DEMO1SPANISHCAFE"></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

View source on GitHub Framework overview

Related docs

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
- environment variable names from .env.example
- TypeScript and normal CSS (no Tailwind)

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