> ## 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.

# Typed Model SDKs

> Per-model class and React wrappers over the base Reactor SDK

A **typed SDK** is a per-model package that wraps the base [`Reactor`](/sdk-reference/reactor-class)
class with named methods and React hooks mirroring that model's published schema.
It only adds ergonomics to aid in development, such as
autocomplete, typed parameters, and named hooks. Every typed method
ultimately calls `sendCommand()` on the base class. See the
[SDK Reference overview](/sdk-reference/using-the-sdk) for when to reach for a typed SDK vs. the base
class.

| Model                                                            | Package                           | Model name        |
| ---------------------------------------------------------------- | --------------------------------- | ----------------- |
| [Helios](/model-api-reference/helios/overview)                   | `@reactor-models/helios`          | `helios`          |
| [LingBot](/model-api-reference/lingbot/overview)                 | `@reactor-models/lingbot`         | `lingbot`         |
| [LingBot World 2](/model-api-reference/lingbot-world-2/overview) | `@reactor-models/lingbot-world-2` | `lingbot-world-2` |
| [LongLive-2.0](/model-api-reference/longlive-v2/overview)        | `@reactor-models/longlive-v2`     | `longlive-v2`     |
| [SANA-Streaming](/model-api-reference/sana-streaming/overview)   | `@reactor-models/sana-streaming`  | `sana-streaming`  |

Each package ships two layers: an imperative class and a React layer. The examples below use Helios;
the other packages are identical with the names swapped, e.g. `LongliveV2Model`, `LongliveV2Provider`,
`useLongliveV2`, `LongliveV2MainVideoView` (and the same pattern for LingBot, LingBot World 2
(`LingbotWorld2Model` / `LingbotWorld2Provider` / `useLingbotWorld2` / `LingbotWorld2MainVideoView`), and
`SanaStreamingModel` / `SanaStreamingProvider` / `useSanaStreaming` / `SanaStreamingMainVideoView`).

## Imperative class

`HeliosModel` (and `LingbotModel`, `LingbotWorld2Model`, `LongliveV2Model`, `SanaStreamingModel`) **extends [`Reactor`](/sdk-reference/reactor-class)**, so it keeps
every base method (`connect`, `disconnect`, `uploadFile`, `on`, `pauseTrack`, `resumeTrack`, …) and
adds a typed method per command. The model name is set for you.

```typescript theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
import { HeliosModel } from "@reactor-models/helios";

const helios = new HeliosModel();
await helios.connect(jwt);

await helios.setPrompt({ prompt: "A serene mountain landscape at sunrise" });
await helios.start();
```

Typed methods mirror the model's commands one-to-one: `helios.setPrompt(...)` sends the
[`set_prompt`](/model-api-reference/helios/schema#set_prompt) command. The canonical list of methods and
their parameters is each model's **Commands** table:
[Helios commands](/model-api-reference/helios/schema#commands) /
[LingBot commands](/model-api-reference/lingbot/schema#commands) /
[LingBot World 2 commands](/model-api-reference/lingbot-world-2/schema#commands) /
[LongLive-2.0 commands](/model-api-reference/longlive-v2/schema#commands) /
[SANA-Streaming commands](/model-api-reference/sana-streaming/schema#commands).

<Note>
  Non-React apps can import the class from the package's `./core` entry
  (`@reactor-models/helios/core`) to skip the React dependency. The default import includes both
  layers.
</Note>

## React layer

For React apps the package also exports a provider, hooks, and a typed video component.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-high-contrast"}}
import {
  HeliosProvider,
  HeliosMainVideoView,
  useHelios,
  useHeliosState,
} from "@reactor-models/helios";

function App({ token }: { token: string }) {
  return (
    <HeliosProvider jwtToken={token}>
      <HeliosMainVideoView className="w-full aspect-video" />
      <Controls />
    </HeliosProvider>
  );
}

function Controls() {
  const { status, setPrompt, start } = useHelios();
  // call setPrompt({ prompt }) / start() once status === "ready"
}
```

* **`<HeliosProvider>`** is [`<ReactorProvider>`](/sdk-reference/react-components#reactorprovider)
  with `modelName` pre-set. Pass the same props (`jwtToken`, `connectOptions`, …) minus `modelName`.
  `connectOptions` accepts the full [`ConnectOptions`](/sdk-reference/types#connectoptions) set
  (`autoConnect`, `maxAttempts`, `autoResumeTracks`, `sessionId`, `connectionId`).
* **`useHelios()`** returns the base [`useReactor`](/sdk-reference/react-hooks#usereactor) store
  (`status`, `connect`, `disconnect`, `sendCommand`, `uploadFile`, `lastError`, …) **plus** a typed
  method per command (`setPrompt`, `schedulePrompt`, `setImage`, `setSeed`, `setSrScale`,
  `setImageStrength`, `start`, `pause`, `resume`, `reset`, and `setConditioning` on Helios 0.9.0+).
* **Per-message hooks** are typed equivalents of
  [`useReactorMessage`](/sdk-reference/react-hooks#usereactormessage), each filtered to one message
  type, plus the catch-all `useHeliosMessage`. Helios exposes `useHeliosState`,
  `useHeliosCommandError`, `useHeliosImageAccepted`, `useHeliosPromptAccepted`,
  `useHeliosConditionsReady`, `useHeliosChunkComplete`, `useHeliosGenerationStarted` /
  `useHeliosGenerationPaused` / `useHeliosGenerationResumed`. LingBot mirrors these and adds
  `useLingbotGenerationComplete` and `useLingbotGenerationReset`. LingBot World 2 mirrors LingBot's full set under the
  `LingbotWorld2` prefix (`useLingbotWorld2State`, `useLingbotWorld2CommandError`, `useLingbotWorld2ImageAccepted`,
  `useLingbotWorld2PromptAccepted`, `useLingbotWorld2ConditionsReady`, `useLingbotWorld2ChunkComplete`, the
  `useLingbotWorld2Generation*` hooks including `Complete` and `Reset`, and the catch-all
  `useLingbotWorld2Message`). SANA-Streaming adds
  `useSanaStreamingVideoAccepted`, `useSanaStreamingAnchored`, and
  `useSanaStreamingGenerationComplete` / `useSanaStreamingGenerationReset`. Payloads match the model's
  [Messages](/model-api-reference/helios/schema#messages-from-model) table.
* **`<HeliosMainVideoView>`** is [`<ReactorView>`](/sdk-reference/react-components#reactorview) with
  `track="main_video"` pre-bound; it accepts the other `ReactorView` props. `useHeliosTrack(name)`
  returns a raw `MediaStreamTrack` for a named track. SANA-Streaming, which takes a live webcam as
  input, also ships `<SanaStreamingCameraView>`, a
  [`<WebcamStream>`](/sdk-reference/react-components#webcamstream) with the `camera` input track
  pre-bound that acquires and publishes the webcam for you.

<Note>
  Multiple clients can share one session. Adopt a backend-created session with
  `connectOptions={{ sessionId }}` (or `connect({ sessionId })` on the class), and adopt a
  pre-registered connection with `connectionId`. With `autoResumeTracks: false` a client subscribes
  to a subset of output tracks and resumes them with `resumeTrack()`. See
  [Sessions](/concepts/sessions#multiple-connections-per-session).
</Note>

## How typed names map to the base SDK

| Typed SDK                      | Base SDK equivalent                               |
| ------------------------------ | ------------------------------------------------- |
| `new HeliosModel()`            | `new Reactor({ modelName: "helios" })`            |
| `helios.setPrompt({ prompt })` | `reactor.sendCommand("set_prompt", { prompt })`   |
| `<HeliosProvider>`             | `<ReactorProvider modelName="helios">`            |
| `useHelios()`                  | `useReactor((s) => s)` plus typed command methods |
| `useHeliosState(fn)`           | `useReactorMessage` filtered to `state` messages  |
| `<HeliosMainVideoView />`      | `<ReactorView track="main_video" />`              |

## Worked examples

Each model's reference page includes an end-to-end tutorial that uses its typed SDK throughout:
[Helios tutorial](/model-api-reference/helios/tutorial) /
[LingBot tutorial](/model-api-reference/lingbot/tutorial) /
[LingBot World 2 tutorial](/model-api-reference/lingbot-world-2/tutorial) /
[LongLive-2.0 tutorial](/model-api-reference/longlive-v2/tutorial) /
[SANA-Streaming tutorial](/model-api-reference/sana-streaming/tutorial).