Installation
macOS darwin 64-bit (Intel), ARM 64-bit (Apple Silicon)
Linux 64-bit, ARM 64-bit
Windows 64-bit, ARM 64-bit
Install @superinterface/react
Install the package.
Terminal
npm i @superinterface/react
Install dependencies
If you currently do not use Tanstack Query or Radix,
you will need to install them (as they are
peerDependencies in @superinterface/react).Terminal
npm i @tanstack/react-query @radix-ui/themes
Set up providers and the first thread
Superinterface needs Tanstack Query and Radix to function.
We will set up necessary dependencies and add a Thread Dialog AI UI to the page.
app.tsx
'use client'
import { SuperinterfaceProvider, ThreadDialog } from '@superinterface/react'
import { Theme } from '@radix-ui/themes'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import '@radix-ui/themes/styles.css'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 10000,
},
},
})
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Theme>
<SuperinterfaceProvider
variables={{
publicApiKey: '37245be8-902a-440e-aaae-c56151fe8acc',
assistantId: 'b43c4197-d34a-4843-aad6-65088f3065e7',
}}
>
<ThreadDialog />
</SuperinterfaceProvider>
</Theme>
</QueryClientProvider>
)
}
(Optional) Manage thread IDs yourself
Superinterface keeps track of threads automatically, but you can provide your
own storage to sync thread IDs with your backend or other systems. Pass
threadIdStorageOptions to SuperinterfaceProvider and surface a threadId
inside variables to give the SDK your current value. See the
SuperinterfaceProvider docs for a reset example, the
reset thread example for a full walkthrough, and
the threadIdStorageOptions utilities reference
for helpers you can reuse.