# Make a page assisted

> Introduce a page or a dialog to the assistant with AssistedPage.

Wrap the page's content in `AssistedPage` inside a client component under `AssistedProvider`.

## Wrap the page

Give it three things:

- `name`: what the user calls the page. The panel's header shows it.
- `instructions`: how to work there, in a few sentences. Name the page's tools and actions where they help.
- `content`: a function returning what the page shows, as plain data. The assistant reads it through `get_page_content` when it needs it.

From `examples/app/app/page.tsx`:

```tsx
    <AssistedPage
      name="Dashboard"
      instructions="The shop's overview: orders waiting to ship, open refunds, revenue this month and the latest orders. Orders, customers and settings each have a page of their own, and so does every order."
      content={() => ({
        toShip: toShip.map(row),
        openRefunds: openRefunds.map(row),
        revenueThisMonth: money(revenue),
        latest: latest.map(row),
      })}
    >
```

Return ids and values the assistant can act on. The universal instructions tell it to take every id and value from `get_page_content`'s answer.

## Name a page from its data

`name` and `instructions` take a string or a function. Each is read when the note is built. From `examples/app/app/orders/[id]/page.tsx`:

```tsx
    <AssistedPage
      name={`Order #${id}`}
      instructions="One order: its customer, items, total, status, refund and note. note fills the note field without saving it, and save_note saves what the field holds."
      content={() => (row ? { ...row, note: order!.note, noteField: draft } : `No order #${id}.`)}
    >
```

## Suggest first messages

`starters` lists first messages for the panel's empty state on this page. Each shows as a button, and picking one sends it as typed. From `examples/app/app/settings/page.tsx`:

```tsx
    <AssistedPage
      name="Settings"
      starters={["Change the shop name to Northwind Traders", "What does each setting do?"]}
      instructions="The shop's name, currency and notification email. setting fills one field by its id without saving; Save saves the form."
      content={() => ({ saved: shop.settings, form: draft, error })}
    >
```

A page without `starters` shows the provider's `starters`, for every page at once:

```tsx
<AssistedProvider runtime={runtime} starters={["What can you do on this page?"]}>
```

Write starters the page can answer: each names something on it.

## Make a dialog assisted

A dialog over a page is an assisted page of its own. Put `AssistedPage` inside the dialog's content. While the dialog is mounted it is the page the user has open, because the last mounted page wins. When it closes, the page under it is back.

Make the dialog non-modal. A modal backdrop covers the panel, so the user cannot type to the assistant while the dialog is open. From `examples/app/app/orders/new-order.tsx`:

```tsx
export function NewOrder({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange} modal={false} disablePointerDismissal>
      <DialogContent showOverlay={false}>
        <NewOrderPage close={() => onOpenChange(false)} />
      </DialogContent>
    </Dialog>
  );
}

function NewOrderPage({ close }: { close: () => void }) {
  const [draft, setDraft] = useState(blank);
  const [error, setError] = useState<string>();
  return (
    <AssistedPage
      name="New order"
      instructions="A dialog over Orders for a new order. Fill its fields with order_field by id, then save_order creates the order and closes the dialog; cancel closes it without saving."
      content={() => ({ ...draft, error })}
    >
```

`showOverlay` is a prop of the example's own `dialog.tsx`. Use your dialog's way of dropping the backdrop.

## Check it

Open the panel on the page. In the floating and sheet modes, its header reads "On" and the page's name, such as "On Dashboard". In the devtools' **Assisted pages** tab, the note and `get_page_content`'s answer show what the assistant receives. See [Mount the devtools](https://superassist.app/how-to/mount-devtools.md).