> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reactor.inc/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get a real-time world model running in minutes — scaffold a ready-to-run app with create-reactor-app, or wire up the SDK by hand

<Tabs>
  <Tab title="JavaScript">
    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.

    <Tip>
      **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:

      ```shell theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
      npx create-reactor-app my-app --model=helios
      ```

      See the **React** tab for the full CLI walkthrough.
    </Tip>

    ## Prerequisites

    * Node.js 18+
    * A [Reactor API key](/authentication)

    <Steps>
      <Step title="Install the SDK">
        <CodeGroup>
          ```shell npm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          npm install @reactor-team/js-sdk
          ```

          ```shell pnpm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          pnpm add @reactor-team/js-sdk
          ```
        </CodeGroup>
      </Step>

      <Step title="Mint a token on your server">
        Exchange your API key for a short-lived token on the server so the key never reaches the browser:

        ```typescript token.ts theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        const r = await fetch("https://api.reactor.inc/tokens", {
          method: "POST",
          headers: { "Reactor-API-Key": process.env.REACTOR_API_KEY! },
        });
        const { jwt } = await r.json();
        ```

        For more information, see [Authentication](/authentication).
      </Step>

      <Step title="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:

        ```typescript main.ts theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        import { Reactor } from "@reactor-team/js-sdk";

        const video = document.querySelector("video")!;

        const reactor = new Reactor({ modelName: "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);
        ```
      </Step>

      <Step title="Run your app">
        Serve the page and open it in your browser.

        <Check>
          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](/model-api-reference/helios/overview) for the full set of commands.
        </Check>
      </Step>
    </Steps>
  </Tab>

  <Tab title="React">
    Connect a React app to a real-time world model. By the end of this guide, real-time AI video streams
    to your browser.

    ## Prerequisites

    * Node.js 18+
    * A [Reactor API key](/authentication)
    * Familiarity with [Next.js Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/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.

    <Steps>
      <Step title="Create your app">
        <CodeGroup>
          ```shell npm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          npx create-reactor-app my-app --model=helios
          ```

          ```shell pnpm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          pnpm create reactor-app my-app --model=helios
          ```
        </CodeGroup>

        This clones the example application and installs dependencies.
      </Step>

      <Step title="Add your API key">
        Move into the new directory and create your `.env` file:

        ```bash theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        cd my-app
        cp .env.example .env
        ```

        Add your API key to `.env`:

        ```bash .env theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        REACTOR_API_KEY=rk_your_api_key_here
        ```
      </Step>

      <Step title="Run your app">
        <CodeGroup>
          ```shell npm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          npm run dev
          ```

          ```shell pnpm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          pnpm dev
          ```
        </CodeGroup>

        <Check>
          Open [http://localhost:3000](http://localhost:3000). Click **Connect**, then enter a prompt. The
          model begins generating video in real time.
        </Check>
      </Step>
    </Steps>

    ## Option 2: Manual setup

    <Steps>
      <Step title="Install the SDK">
        <CodeGroup>
          ```shell npm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          npm install @reactor-team/js-sdk
          ```

          ```shell pnpm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          pnpm add @reactor-team/js-sdk
          ```
        </CodeGroup>
      </Step>

      <Step title="Create a token route">
        Add an API route that exchanges your key for a short-lived token:

        ```typescript api/token/route.ts theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        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! },
          });
          const { jwt } = await r.json();

          return NextResponse.json({ jwt });
        }
        ```

        For more information, see [Authentication](/authentication).
      </Step>

      <Step title="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:

        ```tsx app/page.tsx theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        "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="helios" jwtToken={token} connectOptions={{ autoConnect: true }}>
              <ReactorView className="w-full aspect-video" />
              <AutoStart />
            </ReactorProvider>
          );
        }
        ```
      </Step>

      <Step title="Run your app">
        Start your dev server and open the app in your browser.

        <CodeGroup>
          ```shell npm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          npm run dev
          ```

          ```shell pnpm theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
          pnpm dev
          ```
        </CodeGroup>

        <Check>
          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](/model-api-reference/helios/overview) for the full set of commands.
        </Check>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Python">
    Connect a Python script to a real-time world model and receive frames as NumPy arrays.

    ## Prerequisites

    * Python 3.10+
    * A [Reactor API key](/authentication)

    <Steps>
      <Step title="Install the SDK">
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        pip install reactor-sdk
        ```
      </Step>

      <Step title="Set your API key">
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        export REACTOR_API_KEY=rk_your_api_key_here
        ```
      </Step>

      <Step title="Write your script">
        ```python main.py theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        import asyncio
        import os
        from reactor_sdk import Reactor, ReactorStatus

        async def main():
            reactor = Reactor(
                model_name="helios",
                api_key=os.environ["REACTOR_API_KEY"],
            )

            @reactor.on_frame
            def on_frame(frame):
                # (H, W, 3) uint8 RGB
                print(f"Frame: {frame.shape}")

            # Helios stays idle until it has a prompt and a start command.
            @reactor.on_status(ReactorStatus.READY)
            async def on_ready(status):
                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())
        ```
      </Step>

      <Step title="Run it">
        ```bash theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
        python main.py
        ```

        <Check>`Frame: (768, 1280, 3)` prints to the console as the model generates frames.</Check>
      </Step>
    </Steps>
  </Tab>
</Tabs>

***

## Next steps

<CardGroup cols={2}>
  <Card title="Authentication" icon="key" href="/authentication">
    How to set up secure, production-ready auth for your app.
  </Card>

  <Card title="Using the SDK" icon="code" href="/sdk-reference/using-the-sdk">
    Connect, send commands, receive video, and publish input from JavaScript, React, or Python.
  </Card>

  <Card title="Helios model" icon="video" href="/model-api-reference/helios/overview">
    All available commands and the messages Helios emits.
  </Card>
</CardGroup>