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
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>
)
}