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#

<InstallCommand npm={["@assistant-ui/react-devtools"]} />

Mount the DevTools modal#

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { DevToolsModal } from "@assistant-ui/react-devtools";

export function AssistantApp() {
  const runtime = /* your runtime setup */;
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <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.