@assistant-ui/react-devtools

React DevTools UI for @assistant-ui/react. Embed an event log, context viewer, and runtime inspector in any host application.

Installation

npm install @assistant-ui/react-devtools

Usage

Drop DevToolsModal inside your AssistantRuntimeProvider. It renders a floating launcher and an inline panel (isolated in a shadow root), and is a no-op in production builds.

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

export function App() {
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <DevToolsModal />
      {/* ...your assistant-ui... */}
    </AssistantRuntimeProvider>
  );
}

Custom tabs

The panel is extensible through a plugin registry. Each plugin receives the inspected instance's projected data and renders a tab body.

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

const myTab = createDevToolsPlugin({
  id: "my-tab",
  label: "My tab",
  Component: ({ data }) => <pre>{JSON.stringify(data.state, null, 2)}</pre>,
});

<DevToolsModal plugins={[myTab]} />;

Documentation

Full reference at assistant-ui.com/docs/devtools.