# 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 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.

![Screenshot of the DevTools UI showing logs and state panels](/_next/static/media/devtoolsui.440dyjthplf37.png)

## 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

   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.

   ![DevTools floating launcher anchored in the lower-right corner of a page](/_next/static/media/devtoolsmodal.3h8dr7u5b0f06.png)

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