Tutorial

const { uploadFile, setImage, setPrompt, start } = useLingbot();

// Park the resolver BEFORE calling setImage. If we registered it
// after, the model's ack could land first and we'd miss it.
const imageReadyRef = useRef<(() => void) | null>(null);

useLingbotImageAccepted(() => {
  if (imageReadyRef.current) {
    imageReadyRef.current();
    imageReadyRef.current = null;
  }
});

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

  const imageReady = new Promise<void>((resolve) => {
    imageReadyRef.current = resolve;
  });

  await setImage({ image: ref });
  await imageReady; // ← the load-bearing line
  await setPrompt({ prompt: scene.prompt });
  await start();
}

const { uploadFile, setImage, setPrompt, start } = useLingbot();
const [text, setText] = useState("");

// File-pick handler: upload immediately, await image_accepted.
async function uploadCustomImage(file: File) {
  const imageReady = new Promise<void>((resolve) => {
    imageReadyRef.current = resolve;
  });
  const ref = await uploadFile(file);
  await setImage({ image: ref });
  await imageReady;
}

// Start button: image is already accepted, so just prompt + start.
async function startCustom() {
  if (!hasImage || !text.trim()) return;
  await setPrompt({ prompt: text.trim() });
  await start();
}

import { useLingbot } from "@reactor-models/lingbot";

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 } = useLingbot();
  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 } = useLingbot();
const [snapshot, setSnapshot] = useState<LingbotStateMessage | null>(null);

useLingbotState((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 panels take over.
if (status !== "ready" || !snapshot?.started) return null;

return (
  <>
    <p>{snapshot.current_prompt}</p>
    <span>chunk {snapshot.current_chunk}</span>
    <span className="font-mono">{snapshot.current_action || "still"}</span>
    {snapshot.running ? (
      <button onClick={() => pause()}>Pause</button>
    ) : (
      <button onClick={() => resume()}>Resume</button>
    )}
    <button onClick={() => reset()}>Reset</button>
  </>
);

import { LingbotMainVideoView } from "@reactor-models/lingbot";

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

type Movement = "idle" | "forward" | "back" | "strafe_left" | "strafe_right";
type LookH = "idle" | "left" | "right";
type LookV = "idle" | "up" | "down";

const [pressedMovement, setPressedMovement] = useState<Movement>("idle");
const [pressedLookH, setPressedLookH] = useState<LookH>("idle");
const [pressedLookV, setPressedLookV] = useState<LookV>("idle");

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 */);
  }
}

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);

useLingbotCommandError((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.
useLingbotState(() => {
  setError(null);
});

if (!error) return null;

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