Tutorial

import { HeliosProvider } from "@reactor-models/helios";

// Fetches the JWT from our route. The route's Cache-Control header lets
// the browser serve repeat calls from its HTTP cache until the JWT expires.
async function fetchToken(): Promise<string> {
  const r = await fetch("/api/reactor/token");
  if (!r.ok) {
    const body = (await r.json().catch(() => ({}))) as { error?: string };
    throw new Error(body.error ?? `Token fetch failed: ${r.status}`);
  }
  const { jwt } = (await r.json()) as { jwt: string };
  return jwt;
}

export function HeliosApp() {
  const [token, setToken] = useState<string | null>(null);
  // ...error + loading states omitted...

  useEffect(() => {
    fetchToken()
      .then(setToken)
      .catch((e) => setError(String(e)));
  }, []);

  // HeliosProvider needs a valid JWT, don't render it until we have one.
  if (!token) return <Loading />;

  // HeliosProvider owns the WebRTC connection from here; children read
  // session state through SDK hooks.
  return <HeliosProvider jwtToken={token}>{/* ...app tree... */}</HeliosProvider>;
}

const { setPrompt, start } = useHelios();
const [text, setText] = useState("");
// ...status / ready guard omitted...

// The two-call flow every entry point in this panel shares:
//   1. setPrompt registers the prompt at chunk 0 (required before start)
//   2. start begins generation
async function send(prompt: string) {
  await setPrompt({ prompt: prompt.trim() });
  await start();
}

return (
  <>
    {/* Preset buttons. Text comes from the curated scene library. */}
    {TEXT_SCENES.map((scene) => (
      <button key={scene.id} onClick={() => send(scene.initial.text)}>
        {scene.label}
      </button>
    ))}

    {/* Free-text input. Same send(), different source string. */}
    <textarea value={text} onChange={(e) => setText(e.target.value)} />
    <button onClick={() => send(text)}>Start generating</button>
  </>
);

const { uploadFile, setConditioning, start } = useHelios();

async function startFromExample(scene: Scene & { imageUrl: string }) {
  const blob = await fetch(scene.imageUrl).then((r) => r.blob());
  const ref = await uploadFile(blob, { name: `${scene.id}.jpg` });

  // Atomic: prompt + image commit together, or neither commits.
  await setConditioning({ prompt: scene.initial.text, image: ref });
  await start();
}

async function uploadCustomImage(file: File) {
  const ref = await uploadFile(file);
  await setImage({ image: ref });
  // User types in PromptComposer, which fires setPrompt + start.
}

import { useHelios } from "@reactor-models/helios";

const TONE = {
  disconnected: { dot: "bg-zinc-500", label: "Disconnected" },
  connecting: { dot: "bg-amber-400 animate-pulse", label: "Connecting…" },
  waiting: { dot: "bg-amber-400 animate-pulse", label: "Waiting for GPU…" },
  ready: { dot: "bg-active", label: "Connected" },
};

export function StatusBadge() {
  const { status, lastError, connect, disconnect } = useHelios();
  const idle = status === "disconnected";

  return (
    <div>
      <span className={TONE[status].dot} />
      <span>{TONE[status].label}</span>
      {idle ? (
        <button onClick={() => connect()}>Connect</button>
      ) : (
        <button onClick={() => disconnect()}>Disconnect</button>
      )}
      {lastError && <p className="text-red-400">{lastError.message}</p>}
    </div>
  );
}

const { status, pause, resume, reset } = useHelios();
const [snapshot, setSnapshot] = useState<HeliosStateMessage | null>(null);

useHeliosState((msg) => setSnapshot(msg));

// The SDK doesn't emit a final `state` message on disconnect, so we
// clear ourselves. Otherwise the next session inherits the old one.
useEffect(() => {
  if (status !== "ready") setSnapshot(null);
}, [status]);

// Phase switch: while not started (or after reset), render null and
// let the setup panel take over.
if (status !== "ready" || !snapshot?.started) return null;

return (
  <>
    <p>{String(snapshot.current_prompt ?? "")}</p>
    <span>chunk {snapshot.current_chunk}</span>
    <span>{snapshot.current_frame} frames</span>
    {snapshot.running ? (
      <button onClick={() => pause()}>Pause</button>
    ) : (
      <button onClick={() => resume()}>Resume</button>
    )}
    <button onClick={() => reset()}>Reset</button>
  </>
);

import { HeliosMainVideoView } from "@reactor-models/helios";

export function Video() {
  return (
    <div className="rounded-lg border bg-black">
      <HeliosMainVideoView className="h-full w-full" videoObjectFit="contain" />
    </div>
  );
}

const { status, setPrompt } = useHelios();
const [snapshot, setSnapshot] = useState<HeliosStateMessage | null>(null);
useHeliosState((msg) => setSnapshot(msg));

useEffect(() => {
  if (status !== "ready") setSnapshot(null);
}, [status]);

if (status !== "ready" || !snapshot?.started) return null;

// Match the active prompt against `initial` and every `evolutions[i].text`
// in the curated library. If nothing matches (free-text prompt), bail.
const scene = findSceneForPrompt(String(snapshot.current_prompt ?? ""));
if (!scene) return null;

return (
  <>
    <label>Evolve the scene</label>
    {scene.evolutions.map((evolution) => (
      <button key={evolution.title} onClick={() => setPrompt({ prompt: evolution.text })}>
        {evolution.title}
      </button>
    ))}
  </>
);

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

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

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

return (
  <>
    <button onClick={snap}>Snap last {durationSeconds}s</button>
    {clip && (
      <Modal onClose={() => setClip(null)}>
        <ClipPlayer clip={clip} getJwt={getJwt} />
        <ClipDownloadButton clip={clip} getJwt={getJwt} filename={filename} />
      </Modal>
    )}
  </>
);

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

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

// Clear on the next state snapshot. Any state change implies the user
// has moved on from whatever triggered the error.
useHeliosState(() => {
  setError(null);
});

if (!error) return null;

return (
  <div>
    <span>{error.command} failed</span>
    <p>{error.reason}</p>
  </div>
);