# DevTools
URL: /docs/devtools

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

Hey, 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.

<img alt="Screenshot of the DevTools UI showing logs and state panels" src={__img0} placeholder="blur" />

Setup \[#setup]

<Steps>
  <Step>
    Install the DevTools package \[#install-the-devtools-package]

    <InstallCommand npm={["@assistant-ui/react-devtools"]} />
  </Step>

  <Step>
    Mount the DevTools modal \[#mount-the-devtools-modal]

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

    export function AssistantApp() {
      return (
        <AssistantRuntimeProvider>
          <DevToolsModal />
          {/* ...your assistant-ui... */}
        </AssistantRuntimeProvider>
      );
    }
    ```
  </Step>

  <Step>
    Verify the DevTools overlay \[#verify-the-devtools-overlay]

    That's it! In development builds you should now see the DevTools in the lower-right corner of your site.

    <img alt="DevTools floating modal anchored in the lower-right corner of a page" src={__img1} placeholder="blur" />
  </Step>
</Steps>