DevTools
Hey, the assistant-ui DevTools allows you to debug the assistant-ui state and context, and events without resorting to console.log
. It's an easy way to see how data flows to the assistant-ui's runtime layer.
Setup
Install the DevTools package
npm install @assistant-ui/react-devtools
Mount the DevTools modal
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { DevToolsModal } from "@assistant-ui/react-devtools";
export function AssistantApp() {
return (
<AssistantRuntimeProvider>
<DevToolsModal />
{/* ...your assistant-ui... */}
</AssistantRuntimeProvider>
);
}
Verify the DevTools overlay
That's it! In development builds you should now see the DevTools in the lower-right corner of your site.