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 Launches with your server API key — the SDK helper returns a standard Response (no next package peer dependency).

Client embed

app/Demo.tsx

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

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

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.

app/api/liforma-session/route.ts

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

export const POST = createLiformaSessionRouteHandler({
  // Production: supply authorize() that checks your app session.
  // Demos only:
  allowUnauthenticated: true
});

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 Session Launch.

Example

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