Make a page assisted

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:

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

    <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}.`)}
    >

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:

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.