Audio thread dialog (Realtime API)

This example shows how to build a voice chat with audio thread dialog and Realtime API in Superinterface.
Audio thread realtime assistant
AI provider
Superinterface Cloud logo
Superinterface Cloud
gpt-4o-mini-realtime-preview
Instructions
Superinterface is AI infrastructure platform.
Functions
No functions used.
'use client' import { SuperinterfaceProvider, AudioThreadDialog, AssistantProvider, WebrtcAudioRuntimeProvider, } from '@superinterface/react' import { Theme } from '@radix-ui/themes' import '@radix-ui/themes/styles.css' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 10000, }, }, }) export default function Page() { return ( <QueryClientProvider client={queryClient}> <Theme accentColor="purple" grayColor="gray" appearance="light" radius="medium" scaling="100%" > <SuperinterfaceProvider variables={{ publicApiKey: '18d58cdd-96bc-4d01-ab21-1a891a4fd49e', assistantId: 'd62bb0d7-a2a8-4b5a-b7a1-53d642504122', }} > <AssistantProvider> <WebrtcAudioRuntimeProvider> <AudioThreadDialog /> </WebrtcAudioRuntimeProvider> </AssistantProvider> </SuperinterfaceProvider> </Theme> </QueryClientProvider> ) }
Superinterface audio thread dialog realtime example.
Superinterface audio thread dialog realtime example.

Getting Started

First, run the development server:
npm run dev # or yarn dev # or pnpm dev # or bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.