Mount the devtools

The Assisted pages tab shows what the open page lends the assistant. It plugs into @assistant-ui/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.

Render it

Render AssistedDevtools inside AssistedProvider. From examples/app/app/assistant.tsx:

<AssistedProvider
  runtime={runtime}
  destinations={destinations}
  navigate={(path) => router.push(path)}
>
  <Layout>{children}</Layout>
  <AssistedDevtools />
</AssistedProvider>

AssistedDevtools is assistant-ui’s 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

In a development build, a launcher sits in the bottom-right corner. Open it and 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.