Live Generation

REACTOR_API_KEY=your-reactor-key

import { generateLiveVideo } from '@tanstack/ai'
import { reactorVideo } from '@tanstack/ai-reactor'

export async function POST() {
  const live = await generateLiveVideo({
    adapter: reactorVideo('helios'),
    prompt: 'A chef tosses noodles in a steel wok, flames leaping',
    threadId: 'thread-1',
  })

  return Response.json({
    token: live.token,
    model: live.model,
    prompt: live.prompt,
  })
}

import { Reactor } from '@reactor-team/js-sdk'

const live = await fetch('/api/live', { method: 'POST' }).then((r) => r.json())
const token = typeof live.token === 'string' ? live.token : ''
const model = typeof live.model === 'string' ? live.model : ''
const prompt = typeof live.prompt === 'string' ? live.prompt : ''

const reactor = new Reactor({ modelName: model })
const video = document.querySelector('video')

reactor.on('trackReceived', (name, _track, stream) => {
  if (name !== 'main_video') return
  if (!video) return
  video.muted = true
  const attach = () => {
    video.srcObject = null
    video.srcObject = stream
    void video.play().catch((error: unknown) => {
      if (error instanceof DOMException && error.name === 'AbortError') return
    })
  }
  attach()
  for (const track of stream.getTracks()) {
    track.addEventListener('unmute', attach)
  }
})

await reactor.connect(token)
await reactor.sendCommand('set_sr_scale', { sr_scale: '2x' })
await reactor.sendCommand('set_prompt', { prompt })
await reactor.sendCommand('start', {})

import { generateLiveVideo } from '@tanstack/ai'
import { falLiveVideo } from '@tanstack/ai-fal'

const live = await generateLiveVideo({
  adapter: falLiveVideo('minimax/h3-max/director'),
  prompt: 'Live shopping stream: a host holds up a gold watch to camera',
  threadId: 'thread-1',
})

// live.model is 'fal-ai/minimax-h3-max-director'. Send it to the browser.

import { createFalClient } from '@fal-ai/client'
import { wma } from '@fal-ai/client/realtime'

const fal = createFalClient({ proxyUrl: '/api/fal/proxy' })
const video = document.querySelector('video')

const session = fal.realtime.open(wma(live.model), {
  receive: ['video', 'audio'],
  onError: (error) => {
    console.error(error)
  },
  onMedia: (stream) => {
    if (!video) return
    video.muted = true
    video.srcObject = stream
    void video.play().catch((error: unknown) => {
      if (error instanceof DOMException && error.name === 'AbortError') return
    })
  },
})

session.send({
  type: 'configure',
  prompt: live.prompt,
  prompt_version: 1,
  protocol_version: 1,
})

await session.ready

const picker = document.querySelector('input[type="file"]')
if (!(picker instanceof HTMLInputElement)) {
  throw new Error('Pick a seed image')
}
const file = picker.files?.[0]
if (file === undefined) {
  throw new Error('Pick a seed image')
}
const image = await reactor.uploadFile(file)
await reactor.sendCommand('set_conditioning', { prompt, image })
await reactor.sendCommand('start', {})