Inspect runtime state, context, and events in the browser.
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.
Try it below — the chat on top is a live assistant-ui app, and the panel underneath is the real DevTools inspecting it. Send a message, trigger a tool call, and switch between the Thread, Context, and Activity tabs.
Setup
Install the DevTools package
npm install @assistant-ui/react-devtoolsMount 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 launcher in the lower-right corner of your site. The panel renders inline in an isolated shadow root, and the whole component is stripped from production builds.
Try it here — click the launcher in the lower-right corner of the frame, then use "Run a demo turn" to watch events stream into the open panel. In your app the window opens over a dimmed, click-to-close backdrop; the demo omits it so the app stays usable while the panel is open:
Custom tabs
The panel is extensible. Pass extra inspector tabs to DevToolsModal with plugins; each plugin renders from the inspected instance's projected data (state, logs, modelContext, scopes).
import { createDevToolsPlugin, DevToolsModal } from "@assistant-ui/react-devtools";
const stateTab = createDevToolsPlugin({
id: "my-state",
label: "My state",
Component: ({ data }) => <pre>{JSON.stringify(data.state, null, 2)}</pre>,
});
export function AssistantApp() {
return (
<AssistantRuntimeProvider runtime={runtime}>
<DevToolsModal plugins={[stateTab]} />
{/* ...your assistant-ui... */}
</AssistantRuntimeProvider>
);
}