# DevTools
URL: /docs/devtools

Inspect runtime state, context, and events in the browser.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

The assistant-ui DevTools let you inspect assistant-ui state, context, and events without resorting to `console.log`. They show how data flows to the 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.

\[interactive preview omitted]

- product

  guides/devtools

## Setup

1. ### Install the DevTools package

   ```bash
   npm install @assistant-ui/react-devtools
   ```

2. ### 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>
     );
   }
   ```

3. ### Verify the DevTools overlay

   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:

   \[interactive preview omitted]

## 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>
  );
}
```