Tutorial

import { LongliveV2Provider } from "@reactor-models/longlive-v2";

async function fetchToken(): Promise<string> {
  const r = await fetch("/api/reactor/token");
  if (!r.ok) throw new Error(`Token fetch failed: ${r.status}`);
  const { jwt } = (await r.json()) as { jwt: string };
  return jwt;
}

export function LongLiveApp() {
  // No autoConnect: the user clicks Connect so they see the state machine first-hand.
  return (
    <LongliveV2Provider getJwt={fetchToken}>
      {/* ...sidebar panels + <Video /> + <Timeline /> ... */}
    </LongliveV2Provider>
  );
}

const { status, setShot, scheduleShot, scheduleSceneCut, start } = useLongliveV2();
const { beats } = useStoryboard(); // authored plan: [{ kind, prompt, atChunk }]

async function startStoryboard() {
  const opener = beats.find((b) => b.atChunk === 0);
  await setShot({ prompt: opener.prompt }); // opener fires before start

  for (const b of beats.filter((b) => b.atChunk !== 0)) {
    if (b.kind === "cut") {
      await scheduleSceneCut({ prompt: b.prompt, at_session_chunk: b.atChunk });
    } else {
      await scheduleShot({ prompt: b.prompt, at_session_chunk: b.atChunk });
    }
  }
  await start();
}

import { useLongliveV2State } from "@reactor-models/longlive-v2";
import { useStoryboard, sceneStarts, SCENE_BUDGET } from "../lib/storyboard-store";

const { beats } = useStoryboard();
const [snapshot, setSnapshot] = useState<LongliveV2StateMessage | null>(null);
useLongliveV2State((msg) => setSnapshot(msg));

const sessionChunk = snapshot?.session_chunk ?? 0; // playhead position
const starts = sceneStarts(beats); // chunk index where each scene begins
// render scene dividers at `starts`, a tick per beat, and a playhead at `sessionChunk`

import { useLongliveV2 } from "@reactor-models/longlive-v2";

const { status, lastError, connect, disconnect } = useLongliveV2();
// status ∈ "disconnected" | "connecting" | "waiting" | "ready"
// render a colored dot + label; toggle Connect/Disconnect on `status === "disconnected"`

const { status, pause, resume, reset } = useLongliveV2();
const [snapshot, setSnapshot] = useState<LongliveV2StateMessage | null>(null);
useLongliveV2State((msg) => setSnapshot(msg));

// Phase switch: render nothing until generation is running.
if (status !== "ready" || !snapshot?.started) return null;

const remaining = SCENE_BUDGET - (snapshot.current_chunk ?? 0); // warn near the ceiling → cut
return snapshot.paused ? (
  <button onClick={() => resume()}>Resume</button>
) : (
  <button onClick={() => pause()}>Pause</button>
);
// `reset` clears the model AND the local storyboard so the composer starts fresh.

import { LongliveV2MainVideoView } from "@reactor-models/longlive-v2";

export function Video() {
  return <LongliveV2MainVideoView className="h-full w-full" videoObjectFit="contain" />;
}

const { setShot, sceneCut, scheduleShot, scheduleSceneCut } = useLongliveV2();
const sessionChunk = snapshot.session_chunk ?? 0;

async function fire({ kind, prompt, when, atChunk }) {
  if (when === "now") {
    if (kind === "cut")
      await sceneCut({ prompt }); // hard break, fresh 48-chunk budget
    else await setShot({ prompt }); // soft beat, same scene
  } else {
    const target = Math.max(sessionChunk + 1, atChunk); // can't schedule in the past
    if (kind === "cut") await scheduleSceneCut({ prompt, at_session_chunk: target });
    else await scheduleShot({ prompt, at_session_chunk: target });
  }
}

import {
  ClipDownloadButton,
  ClipPlayer,
  RecordingError,
  useReactor,
  type Clip,
} from "@reactor-team/js-sdk";

const { status, requestClip } = useReactor((s) => ({
  status: s.status,
  requestClip: s.requestClip,
}));
const [clip, setClip] = useState<Clip | null>(null);

async function snap() {
  try {
    setClip(await requestClip(10)); // last 10 seconds
  } catch (e) {
    if (e instanceof RecordingError) {
      // render e.code + e.reason (omitted)
    }
  }
}

return (
  clip && (
    <Modal onClose={() => setClip(null)}>
      <ClipPlayer clip={clip} />
      <ClipDownloadButton clip={clip} filename="longlive-clip.mp4" />
    </Modal>
  )
);

const [error, setError] = useState<{ command: string; reason: string } | null>(null);

useLongliveV2CommandError((msg) => setError({ command: msg.command, reason: msg.reason }));

// Clear on the next state snapshot: any state change implies the user has moved on.
useLongliveV2State(() => setError(null));

if (!error) return null;
return (
  <div>
    {error.command} failed: {error.reason}
  </div>
);