@json-render/devtools-react

import { JsonRenderDevtools } from "@json-render/devtools-react";

<JSONUIProvider registry={registry} handlers={handlers}>
  <Renderer spec={spec} registry={registry} />
  <JsonRenderDevtools spec={spec} catalog={catalog} messages={messages} />
</JSONUIProvider>

interface JsonRenderDevtoolsProps {
  /** Current spec being rendered. */
  spec?: Spec | null;
  /** Catalog definition (required for the Catalog panel). */
  catalog?: Catalog | null;
  /** AI SDK useChat messages array. */
  messages?: readonly UIMessage[];
  /** Start the panel open. Default: false. */
  initialOpen?: boolean;
  /** Floating toggle position. */
  position?: "bottom-right" | "bottom-left" | "right";
  /** Toggle keybinding, or false to disable. Default: "mod+shift+j". */
  hotkey?: string | false;
  /** Ring buffer size. Default: 500. */
  bufferSize?: number;
  /** Fires for every devtools event. */
  onEvent?: (evt: DevtoolsEvent) => void;
}

import { useJsonRenderDevtools } from "@json-render/devtools-react";

const devtools = useJsonRenderDevtools();
devtools?.open();
devtools?.toggle();
devtools?.close();
devtools?.clear();
devtools?.recordEvent({ kind: "stream-text", at: Date.now(), text: "hi" });