Superinterface
Product
Pricing
Examples
Docs
Blog
GitHub
Discord
Book a demo
Sign in
Audio thread
This example shows how to build a voice chat in Superinterface.
Audio thread assistant
AI provider
Superinterface Cloud
gpt-4.1-nano
Instructions
Superinterface is AI infrastructure platform.
Functions
No functions used.
page.tsx
Files
Files
Editor
Editor
Preview
Preview
src
app
globals.css
layout.tsx
opengraph-image.png
page.tsx
.gitignore
README.md
eslint.config.mjs
next.config.ts
package-lock.json
package.json
tsconfig.json
'
use client
'
import
{
SuperinterfaceProvider
,
AudioThread
,
AssistantProvider
,
}
from
'
@superinterface/react
'
import
{
Theme
,
Flex
}
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
=
"
sky
"
grayColor
=
"
gray
"
appearance
=
"
dark
"
radius
=
"
medium
"
scaling
=
"
100%
"
>
<
SuperinterfaceProvider
variables
=
{
{
publicApiKey
:
'
18d58cdd-96bc-4d01-ab21-1a891a4fd49e
'
,
assistantId
:
'
bb7b9ac0-19ae-4dd7-9faa-c96efe84bd5f
'
,
}
}
>
<
AssistantProvider
>
<
Flex
flexGrow
=
"
1
"
height
=
"
100dvh
"
p
=
"
5
"
>
<
AudioThread
/>
</
Flex
>
</
AssistantProvider
>
</
SuperinterfaceProvider
>
</
Theme
>
</
QueryClientProvider
>
)
}
Superinterface audio thread example.
This example is hosted here:
https://examples-audio-thread.superinterface.ai
(see code
here
).
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.
View on GitHub
Open fullscreen demo
Deploy on Vercel
Open in CodeSandbox
Status
Changelog
Terms of service
Privacy policy