logoassistant-ui

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.

Screenshot of the DevTools UI showing logs and state panels

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.

DevTools floating modal anchored in the lower-right corner of a page