Spanish Tutor · SvelteKit

Spanish Tutor — SvelteKit

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

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/spanish-tutor/sveltekit
npm install
npm run dev
# http://localhost:4003

Local URL: http://localhost:4003

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_T0I7ACMQLBMPG6K.

Liforma integration

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

<script>
  import { Experience } from '@liforma/client/svelte';
</script>

<Experience experienceId={lesson.experienceId} />

Key files

• src/lib/lessons.ts — lesson data and per-lesson experienceId
• src/routes/+page.svelte — lesson UI, embed, and close-before-switch flow

Related docs

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

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

Source repo folder: examples/spanish-tutor/sveltekit

Preserve:
- Liforma experience embed via `<Experience />` from `@liforma/client/svelte`
- 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
- experience IDs per lesson
- surrounding product UI