Skip to main content
Connect a React app to a real-time world model. By the end of this guide, video will be streaming in your browser.

Prerequisites

Option 1: CLI

The easiest way to get started is by using the create-reactor-app CLI. This tool generates a ready-to-run Next.js app with the SDK installed and secure auth already configured.
1

Create your app

npx create-reactor-app my-app
The CLI will prompt you to choose a template project.
2

Add your API key

Move into the new directory, create a copy of .env.example and name it .env.
cd my-app
cp .env.example .env
Add your API key to .env:
NEXT_PUBLIC_REACTOR_API_KEY=rk_your_api_key_here
3

Run your app

npm run dev
Open http://localhost:3000. Video will start streaming within a few seconds.

Option 2: Manual setup

1

Install the SDK

npm install @reactor-team/js-sdk
2

Build your component

"use client";

import { ReactorProvider, ReactorView, fetchInsecureToken } from "@reactor-team/js-sdk";
import { useState, useEffect } from "react";

export default function App() {
  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    fetchInsecureToken("rk_your_api_key_here").then(setToken);
  }, []);

  if (!token) return null;

  return (
    <ReactorProvider modelName="your-model-name" jwtToken={token}>
      <ReactorView className="w-full aspect-video" />
    </ReactorProvider>
  );
}
fetchInsecureToken exposes your API key in client-side code — use it for local development only. See the Authentication guide for the secure production pattern.
3

Run your app

Start your dev server and open your app in the browser. Once the status reaches ready, video will begin streaming.
You should see live video streaming within a few seconds of the page loading.

Next steps

Authentication

How to set up secure, production-ready auth for your app.

JavaScript SDK

Components, hooks, sending commands, and webcam input.

Python SDK

Multi-track video, publishing input, reconnection.

Helios model

All available commands and the messages Helios emits.