Experience (Next.js)

Overview

Next.js apps use the same React Experience component inside a client boundary. For server sessions, add a same-origin API route that mints Session Manifests with your server API key — the SDK helper returns a standard Response (no next package peer dependency).

Client embed

import { Experience } from '@liforma/client/react';

export function Demo() {
  return <Experience experienceId="exp_01DEMO1SPANISHCAFE" />;
}

In the App Router, mark the file 'use client' or import it from a client component.

Server session route

createLiformaSessionRouteHandler() reads LIFORMA_API_KEY and LIFORMA_API_URL from the environment by default. Override with getApiKey / getApiBaseUrl when needed.

import { createLiformaSessionRouteHandler } from '@liforma/client/next';

export const POST = createLiformaSessionRouteHandler();

The handler validates experienceId, forwards optional launch fields ( language, mode, speechInputMode, speechOnly, startButton, processorId), and responds with Cache-Control: no-store, private.

On the client, pass sessionEndpoint="/api/liforma-session" with experienceId — the SDK POSTs the mint request and attaches the returned manifest.

Example

See guided-practice Next.js (browser embed by default; optional app/api/liforma-session/route.ts for server session demos).