Spanish Tutor · Next.js

Spanish Tutor — Next.js

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/nextjs
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/react:

<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

• TutorApp.tsx — lesson UI, embed, and close-before-switch flow
• lib/lessons.ts — lesson data and per-lesson experienceId

Related docs

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

Use the Liforma Spanish Tutor Next.js App Router example as source material.

Source repo folder: examples/spanish-tutor/nextjs

Start from `TutorApp.tsx` — lesson selection + Experience mount rules.

Preserve:
- `<Experience />` from `@liforma/client/react` with `language="es"`
- `'use client'` on the Experience mount component
- import from `@liforma/client/react` (not `/next` — that export is the session-route helper)
- close-before-switch: do not change `experienceId` while a session is mounted; unmount first
- mount Experience only when the session is active
- 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