- JavaScript
- React
- Python
- C++
- Swift
- Java
Connect to a real-time world model with the imperative
Reactor client and render frames into a
<video> element. By the end of this guide you’ll have real-time AI video streaming wired into your app.Want a ready-to-run app instead of wiring it up by hand? Scaffold a complete project — SDK
installed and secure auth already configured — in one command:See the React tab for the full CLI walkthrough.
npx create-reactor-app my-app --model=helios
Prerequisites
- Node.js 18+
- A Reactor API key
1
Install the SDK
npm install @reactor-team/js-sdk
pnpm add @reactor-team/js-sdk
2
Mint a token on your server
Exchange your API key for a short-lived, session-scoped token on the server so the key never
reaches the browser. Always scope the token to the model it’s for:For more information, see Authentication.
token.ts
const r = await fetch("https://api.reactor.inc/tokens", {
method: "POST",
headers: {
"Reactor-API-Key": process.env.REACTOR_API_KEY!,
"Content-Type": "application/json",
},
body: JSON.stringify({
authorization_details: [
{ type: "session", resources: { models: { match: ["reactor/helios"] } } },
],
}),
});
const { jwt } = await r.json();
3
Connect and render frames
Create a
Reactor object, attach the model’s video track to a <video> element, then connect with the
token from your server. Helios stays idle until it has a prompt and a start command, so send those
once the session is ready:main.ts
import { Reactor } from "@reactor-team/js-sdk";
const video = document.querySelector("video")!;
const reactor = new Reactor({ modelName: "reactor/helios" });
reactor.on("trackReceived", (name: string, track: MediaStreamTrack) => {
if (name !== "main_video") return;
video.srcObject = new MediaStream([track]);
void video.play();
});
// Once the session is ready, send a prompt and start generating.
reactor.on("statusChanged", async (status: string) => {
if (status !== "ready") return;
await reactor.sendCommand("set_prompt", { prompt: "A serene mountain landscape at sunrise" });
await reactor.sendCommand("start", {});
});
const jwt = await getToken(); // fetch the token minted on your server
await reactor.connect(jwt);
4
Run your app
Serve the page and open it in your browser.
The
<video> element starts playing once the track arrives, and real-time AI video streams to your
page. Try editing the prompt to steer what the model generates. See the
Helios reference for the full set of commands.Connect a React app to a real-time world model. By the end of this guide, real-time AI video streams
to your browser.This clones the example application and installs dependencies.
Prerequisites
- Node.js 18+
- A Reactor API key
- Familiarity with Next.js Route Handlers. Real-time video streaming relies on a server route to mint short-lived tokens, so it works a little differently from a typical client-only gen-AI call.
Option 1: CLI command
The fastest way to get started.create-reactor-app generates a ready-to-run Next.js app for the
model you pass with --model, with the SDK installed and secure auth already configured.1
Create your app
npx create-reactor-app my-app --model=helios
pnpm create reactor-app my-app --model=helios
--model accepts any model in the
catalog; run the command without --model to list what’s
available.2
Add your API key
Move into the new directory and create your Add your API key to
.env file:cd my-app
cp .env.example .env
.env:.env
REACTOR_API_KEY=rk_your_api_key_here
3
Run your app
npm run dev
pnpm dev
Open http://localhost:3000. Click Connect, then enter a prompt. The
model begins generating video in real time.
Option 2: Manual setup
1
Install the SDK
npm install @reactor-team/js-sdk
pnpm add @reactor-team/js-sdk
2
Create a token route
Add an API route that exchanges your key for a short-lived token, scoped to sessions on the model
it’s for:For more information, see Authentication.
api/token/route.ts
import { NextResponse } from "next/server";
export async function POST() {
const r = await fetch("https://api.reactor.inc/tokens", {
method: "POST",
headers: {
"Reactor-API-Key": process.env.REACTOR_API_KEY!,
"Content-Type": "application/json",
},
body: JSON.stringify({
authorization_details: [
{ type: "session", resources: { models: { match: ["reactor/helios"] } } },
],
}),
});
const { jwt } = await r.json();
return NextResponse.json({ jwt });
}
3
Build your component
Fetch the token from your backend and pass it to the SDK. Helios stays idle until it has a prompt
and a
start command, so a small AutoStart component sends those once the session is ready:app/page.tsx
"use client";
import { use, useEffect } from "react";
import { ReactorProvider, ReactorView, useReactor } from "@reactor-team/js-sdk";
async function getToken() {
const r = await fetch("/api/token", { method: "POST" });
const { jwt } = await r.json();
return jwt;
}
const tokenPromise = getToken();
// Once the session is ready, send a prompt and start generating.
function AutoStart() {
const { status, sendCommand } = useReactor((s) => s);
useEffect(() => {
if (status !== "ready") return;
sendCommand("set_prompt", { prompt: "A serene mountain landscape at sunrise" });
sendCommand("start", {});
}, [status, sendCommand]);
return null;
}
export default function App() {
const token = use(tokenPromise);
return (
<ReactorProvider modelName="reactor/helios" jwtToken={token} connectOptions={{ autoConnect: true }}>
<ReactorView className="w-full aspect-video" />
<AutoStart />
</ReactorProvider>
);
}
4
Run your app
Start your dev server and open the app in your browser.
npm run dev
pnpm dev
Your app connects, the
<ReactorView> mounts, and real-time AI video streams in. Try editing the
prompt to steer what the model generates. See the
Helios reference for the full set of commands.Connect a Python script to a real-time world model and receive frames as NumPy arrays.
Prerequisites
- Python 3.10+
- A Reactor API key
1
Install the SDK
pip install reactor-sdk
2
Set your API key
export REACTOR_API_KEY=rk_your_api_key_here
3
Write your script
main.py
import asyncio
import os
from reactor_sdk import Reactor, ReactorStatus
async def main():
reactor = Reactor(
model_name="reactor/helios",
api_key=os.environ["REACTOR_API_KEY"],
)
# Helios stays idle until it has a prompt and a start command.
@reactor.on_status(ReactorStatus.READY)
async def on_ready(status):
output = reactor.tracks.with_direction("recvonly").with_kind("video").one()
@output.on_frame
def on_frame(frame):
# (H, W, 3) uint8 RGB
print(f"Frame: {frame.shape}")
await reactor.send_command("set_prompt", {"prompt": "A serene mountain landscape at sunrise"})
await reactor.send_command("start", {})
await reactor.connect()
await asyncio.Event().wait() # run until interrupted
asyncio.run(main())
4
Run it
python main.py
Frame: (768, 1280, 3) prints to the console as the model generates frames.Connect a native C++ application to a real-time world model and receive decoded video frames as raw
BGRA pixels.
Prerequisites
- A C++17 compiler and CMake 3.16+
- A Reactor API key
1
Install the SDK
Download the release archive for your platform from the
releases page and extract it:See Installation for every platform’s archive and what’s inside
it.
tar xzf reactor-sdk-cpp-1.0.0-linux-x64.tar.gz
2
Set your API key
export REACTOR_API_KEY=rk_your_api_key_here
3
Write your program
Helios stays idle until it has a prompt and a
start command, so send those once the session is
ready:#include <reactor/reactor.hpp>
#include <cstdlib>
#include <iostream>
int main() {
reactor::Reactor client{"reactor/helios", reactor::ApiKey{std::getenv("REACTOR_API_KEY")}};
auto status = client.on_status([&client](reactor::Status s) {
if (s != reactor::Status::Ready) return;
client.send_command("set_prompt", {{"prompt", "A serene mountain landscape at sunrise"}});
client.send_command("start", {});
});
client.connect().get();
// Register once connect() resolves — earlier throws, since the session has
// not declared its tracks yet.
auto output = client.track("main_video");
auto frames = output.on_frame([](const reactor::VideoFrame& frame) {
std::cout << "Frame: " << frame.width << "x" << frame.height << '\n';
});
std::cin.get(); // run until interrupted
client.disconnect().get();
}
cmake_minimum_required(VERSION 3.16)
project(reactor_quickstart CXX)
find_package(reactor-sdk REQUIRED)
add_executable(app main.cpp)
target_link_libraries(app PRIVATE reactor::sdk)
4
Build and run it
cmake -S . -B build -DCMAKE_PREFIX_PATH=$PWD/reactor-sdk-cpp-1.0.0-linux-x64
cmake --build build
./build/app
Frame: 1280x720 prints to the console as the model generates frames.Connect a native Swift app to a real-time world model and receive decoded video frames as raw BGRA
pixels.For an Xcode-run app, add
Prerequisites
- Xcode 16+ (Swift 6), targeting macOS 13+ or iOS 16+
- A Reactor API key
1
Add the package
In Xcode: File → Add Package Dependencies… and paste:Select the Reactor library product. See Installation for the
https://github.com/reactor-team/reactor-client-sdks
Package.swift form and what SwiftPM resolves.2
Set your API key
export REACTOR_API_KEY=rk_your_api_key_here
REACTOR_API_KEY to the scheme’s Run → Arguments → Environment
Variables instead.3
Write your program
Helios stays idle until it has a prompt and a
start command, so send those once the session is
ready:main.swift
import Foundation
import Reactor
let reactor = try await Reactor(model: "reactor/helios", apiKey: ProcessInfo.processInfo.environment["REACTOR_API_KEY"]!)
let status = reactor.onStatus { s in
guard s == .ready else { return }
Task {
try await reactor.sendCommand("set_prompt", ["prompt": "A serene mountain landscape at sunrise"])
try await reactor.sendCommand("start")
}
}
try await reactor.connect()
// Could just as well be registered before connect() — Swift accepts any
// track name until the session declares its tracks.
let output = try reactor.track("main_video")
let frames = try output.onFrame { frame in
print("Frame: \(frame.width)x\(frame.height)")
}
try await Task.sleep(for: .seconds(30)) // run for a while
try await reactor.disconnect()
4
Run it
Run the target from Xcode, or
swift run for a package-local executable.Frame: 1280x720 prints to the console as the model generates frames.Connect a Java application to Helios and print the dimensions of its decoded video frames.Keep API keys on your server or local development machine. A distributed desktop app should obtain a
scoped JWT from your backend instead; see Java authentication.On Windows, use
Prerequisites
- JDK 22 or newer and Maven 3.9+
- A supported desktop or server platform
- A Reactor API key for this local example
1
Create a Maven project
In an empty directory, create Maven also downloads the native libraries. For Gradle, see
Java installation.
pom.xml:pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>example</groupId>
<artifactId>reactor-quickstart</artifactId>
<version>1.0.0</version>
<properties>
<maven.compiler.release>22</maven.compiler.release>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<dependency>
<groupId>inc.reactor</groupId>
<artifactId>reactor-sdk</artifactId>
<version>1.0.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.14.0</version>
</plugin>
</plugins>
</build>
</project>
2
Set your API key
export REACTOR_API_KEY=rk_your_api_key_here
3
Write your program
Create
src/main/java/Main.java:Main.java
import inc.reactor.sdk.*;
public class Main {
public static void main(String[] args) throws Exception {
String apiUrl = "https://api.reactor.inc";
String jwt = Reactor.fetchJwt(apiUrl, System.getenv("REACTOR_API_KEY"),
JsonValue.parse("""
{"models": ["reactor/helios"], "max_sessions": 1}
"""), false).join();
try (Reactor reactor = Reactor.open(ReactorOptions
.builder(apiUrl, "reactor/helios").jwt(jwt).build())) {
try {
reactor.connect().join();
try (Subscription frames = reactor.track("main_video").onFrame((VideoFrame frame) -> {
System.out.printf("Frame: %dx%d%n", frame.width(), frame.height());
})) {
reactor.sendCommand("set_prompt", JsonValue.object()
.put("prompt", "A serene mountain landscape at sunrise").build()).join();
reactor.sendCommand("start").join();
Thread.sleep(30_000);
}
} finally {
reactor.disconnect().join();
}
}
}
}
join() waits for an asynchronous operation. This example uses the main thread; in a desktop UI,
use future continuations or a background thread so the interface stays responsive.4
Build and run
mvn compile dependency:copy-dependencies
java --enable-native-access=ALL-UNNAMED -cp "target/classes:target/dependency/*" Main
; instead of : between the two classpath entries. The native-access flag is
required for the SDK’s native calls; modular applications use --enable-native-access=inc.reactor.sdk.The console prints frame dimensions while Helios generates video, then disconnects after 30 seconds.
Next steps
Authentication
How to set up secure, production-ready auth for your app.
Using the SDK
Connect, send commands, receive video, and publish input from JavaScript, React, Python, C++, Swift, or Java.
Helios model
All available commands and the messages Helios emits.
Explore the models
Browse the full model catalog and swap any model in with a single flag.