Mount the devtools

The Assisted pages tab shows what the open page lends the assistant. It lives in the devtools entry, @super-assist/react/devtools.

Install the devtools

npm install @assistant-ui/react-devtools

It is an optional peer of @super-assist/react. Only the @super-assist/react/devtools entry imports it, so an app without it never loads it.

Open them from the panel

Pass AssistedDevtoolsPanel as the panel’s devtools. The header gets a Bug button that opens the devtools in a window of their own, with the Assisted pages tab:

import { AssistedDevtoolsPanel } from "@super-assist/react/devtools";

<AssistedPanel mode="floating" devtools={<AssistedDevtoolsPanel />} />;

In a header you compose, place AssistedPanel.Devtools with the devtools as its children:

<AssistedPanel.Header>
  <AssistedPanel.Title />
  <AssistedPanel.Devtools>
    <AssistedDevtoolsPanel />
  </AssistedPanel.Devtools>
  <AssistedPanel.Close />
</AssistedPanel.Header>

AssistedDevtoolsPanel works in production builds too: while it is open it registers the runtime with the devtools, which assistant-ui does only in development. Pass it only to the people who should see it, for example devtools={import.meta.env.DEV && <AssistedDevtoolsPanel />} in Vite for development alone.

Or render the launcher

An embedded panel has no header by default. Render AssistedDevtools inside AssistedProvider instead. From examples/app/app/assistant.tsx:

<div className="w-md shrink-0 border-s">
  {panel}
  <AssistedDevtools />
</div>

AssistedDevtools is the devtools’ DevToolsModal with the tab added. If you already render your own DevToolsModal, add the plugin to it instead:

const plugins = [assistedPagesPlugin];

export function Devtools() {
  return <DevToolsModal plugins={plugins} />;
}

Open the tab

Press the panel’s Bug button, or, with AssistedDevtools in a development build, the launcher in the bottom-right corner. Pick Assisted pages. It re-reads every second and follows client navigation.

DevToolsModal renders nothing in production builds. The tab’s module still ships with the app.

The tab’s sections are listed in the devtools reference.