# Mount the devtools

> Add the devtools with the Assisted pages tab to see what each page lends, from the panel's header or as a launcher.

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

```bash
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:

```tsx
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:

```tsx
<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`:

```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:

```tsx
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](https://superassist.app/reference/devtools.md).