Skip to main content

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.

​
<ReactorProvider>

Context provider that manages the Reactor connection for your React tree. Must wrap all other Reactor components and hooks.
Example
<ReactorProvider modelName="your-model-name" jwtToken={token}>
  {children}
</ReactorProvider>
​
modelName
string
required
The name of the model to connect to.
​
jwtToken
string
Token for authentication. See Authentication.
​
apiUrl
string
default:"https://api.reactor.inc"
The API URL.
​
local
boolean
default:"false"
If true, connects to a local runtime at http://localhost:8080. Ignores apiUrl.
​
connectOptions
ReactorConnectOptions
Connection behavior options.
​
connectOptions.autoConnect
boolean
default:"false"
Automatically connect on mount.
​
connectOptions.maxAttempts
number
default:"6"
Maximum SDP polling attempts before giving up.

​
<ReactorView>

Displays the video stream from the model. Automatically binds to the video output and manages the video element lifecycle.
Example
<ReactorView className="w-full aspect-video" videoObjectFit="cover" />
​
track
string
default:"main_video"
The name of the video track to display. Most models expose a single video output called main_video, which is used by default. Only set this if the model exposes multiple video tracks.
​
audioTrack
string
The name of an audio track to play alongside the video.
​
muted
boolean
default:"true"
Whether the video element is muted.
​
className
string
CSS class name.
​
style
CSSProperties
Inline styles.
​
width
number
Width of the video element in pixels.
​
height
number
Height of the video element in pixels.
​
videoObjectFit
"contain" | "cover" | "fill" | "none" | "scale-down"
default:"contain"
CSS object-fit value for the video element.

​
<WebcamStream>

Captures webcam video and automatically publishes it to the model when the connection is ready. Handles camera permissions, lifecycle, and cleanup.
Example
<ReactorProvider modelName="your-model-name" jwtToken={token}>
  <WebcamStream track="webcam" />
</ReactorProvider>
​
track
string
required
The name of the send track to publish to. Must match a sendonly track name declared by the model.
​
className
string
CSS class name.
​
style
CSSProperties
Inline styles.
​
videoConstraints
MediaTrackConstraints
default:"{ width: 1280, height: 720 }"
Constraints passed to getUserMedia().
​
showWebcam
boolean
default:"true"
Whether to render the webcam preview.
​
videoObjectFit
"contain" | "cover" | "fill" | "none" | "scale-down"
default:"contain"
CSS object-fit value for the webcam preview.
​
audio
boolean
default:"false"
If true, also captures and publishes microphone audio alongside the webcam video.
​
audioTrack
string
default:"mic"
The name of the audio track to publish to. Must match a sendonly audio track name declared by the model.
The component automatically publishes the webcam to the named track when status becomes "ready", and unpublishes when the connection closes or the component unmounts.

​
<ReactorController>

Auto-generates UI controls from the model’s command schema. Intended for prototyping and debugging. For production, build custom controls.
Example
<ReactorController className="w-full" />
​
className
string
CSS class name.
​
style
CSSProperties
Inline styles.
When the connection reaches "ready", the component requests the model’s capabilities and renders a form for each declared command. Supports number, integer, string, boolean, and enum parameter types. Sliders execute immediately; other inputs require clicking “Execute”.

​
<ClipPlayer>

Plays a Clip inline. Renders a native <video controls> element and handles fetching and attaching the clip on Safari, Chrome, Firefox, and Edge.
Example
<ClipPlayer clip={clip} getJwt={() => jwt} />
ClipPlayer works without a ReactorProvider in the tree, so it keeps rendering a clip after the session has ended.
​
clip
Clip
required
The clip to play. Changing this prop re-attaches the player.
​
getJwt
() => string | Promise<string>
Resolver for the auth token used to fetch the clip. Required when running against https://api.reactor.inc. Called on each fetch so token refreshes are picked up. See Authentication.
​
slackMs
number
default:"15000"
Grace period in milliseconds before the SDK gives up waiting for the clip to be finalised. Bump for long recordings where the final segment can take longer to finalise.
​
autoPlay
boolean
default:"true"
Whether playback starts as soon as the clip is attached.
​
muted
boolean
default:"true"
Whether the video starts muted. Browsers block autoplay-with-audio without a user gesture.
​
className
string
CSS class name forwarded to the wrapping element.
​
style
CSSProperties
Inline styles forwarded to the wrapping element.
Safari can play clips natively. Other browsers need hls.js installed alongside the SDK as an optional peer dependency:
Install hls.js
pnpm add hls.js

​
<ClipDownloadButton>

Drop-in button that downloads a Clip as an MP4. The default label reflects download progress; override it with children to show your own.
Example
<ClipDownloadButton clip={clip} getJwt={() => jwt} />
​
clip
Clip
required
The clip to download.
​
getJwt
() => string | Promise<string>
Resolver for the auth token used to fetch the clip. Required against https://api.reactor.inc. See Authentication.
​
filename
string
default:"\"reactor-clip.mp4\""
Filename used by the browser save dialog.
​
children
ReactNode | ((state: ClipDownloadState) => ReactNode)
Static label, or a render function that receives the current ClipDownloadState. Omit for the default progress-aware label.
​
className
string
CSS class name forwarded to the underlying <button>.
​
style
CSSProperties
Inline styles forwarded to the underlying <button>.
​
disabled
boolean
default:"false"
Disables the button. Always disabled while a download is in flight, regardless of this prop.
For custom download UI, use useClipDownload.