AudioThread
Use the
<AudioThread> component to render an audio thread for chatting with an assistant in voice.app.tsx
import { SuperinterfaceProvider, AudioThread } from '@superinterface/react'
export const App = () => (
<SuperinterfaceProvider>
<AudioThread />
</SuperinterfaceProvider>
)
Subcomponents
AudioThread.Root
Wrap subcomponents with
AudioThread.Root to provide audio thread context.app.tsx
export const App = () => (
<AudioThread.Root>
<AudioThread.Form />
</AudioThread.Root>
)
AudioThread.Form
Renders a microphone button that records and sends audio.
app.tsx
<AudioThread.Root>
<AudioThread.Form className="rounded-full" />
</AudioThread.Root>
AudioThread.Status
Display the current connection status such as
recording or idle.app.tsx
<AudioThread.Root>
<AudioThread.Form />
<AudioThread.Status />
</AudioThread.Root>
AudioThread.Visualization
Render an assistant animation while audio is playing or recording.
app.tsx
<AudioThread.Visualization.Root>
<AudioThread.Visualization.AssistantInfo />
<AudioThread.Visualization.AssistantVisualization.Root>
<AudioThread.Visualization.AssistantVisualization.BarsVisualizer />
</AudioThread.Visualization.AssistantVisualization.Root>
</AudioThread.Visualization.Root>
Use
AudioThread.Visualization.Provider to supply a custom visualization implementation.
AudioThread.Visualization.AssistantVisualization groups primitives for the assistant animation, with BarsVisualizer providing a
default bar-style effect.