Skip to content
super-assist

AssistedProvider

AssistedProvider lends what every page shares: the universal instructions, offer_choices, and go_to_page and show_links when it has destinations. useAssisted reads and drives the panel’s open state.

The floating panel, headed On Orders. The user asked to go to the orders, and the expanded go_to_page call answers with Opened /orders and the Orders page's note.The floating panel, headed On Orders. The user asked to go to the orders, and the expanded go_to_page call answers with Opened /orders and the Orders page's note.

Usage

Section titled “Usage”

Wrap the app inside the runtime. From examples/app/app/assistant.tsx:

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

destinations names the pages go_to_page opens. From the same file:

const destinations = {
  home: "/",
  orders: "/orders",
  order: "/orders/:id",
  customers: "/customers",
  settings: "/settings",
};

What the model sees

Section titled “What the model sees”

Every request’s system text holds the universal instructions, quoted in Model context. With the example’s destinations, go_to_page is described as:

Open a page of the app for the user and answer, once it has loaded, with the page section of the page it opened. The pages and their paths: home /, orders /orders, order /orders/:id, customers /customers, settings /settings.

The call in the screenshot answered with the path it opened and the note of the page there:

Opened /orders.


## The page the user has open: Orders


Every order of the shop, as filtered by status with filter_orders. Ship or cancel an order that is waiting to ship by its id. New order opens a dialog that introduces itself. Each order has a page of its own with its note and refund.


Its tools: filter_orders, get_page_content.


Its actions: cancel_order, new_order, ship_order.

show_links and offer_choices render cards, shown on their own pages: Links card and Choices card.

Props

Section titled “Props”
Prop Type Required Description
runtime AssistantRuntime Yes The host’s assistant-ui runtime.
destinations Record<string, string> No Page names to paths. :id in a path takes an id.
navigate (path: string) => unknown No Opens a path. go_to_page awaits it.
children ReactNode Yes The app.
  • Renders AssistantRuntimeProvider with runtime and the library’s AuiConfig.
  • Lends the universal instructions and offer_choices.
  • Lends go_to_page and show_links only when both destinations and navigate are given.
  • Answers calls to tools and actions that have left with { error } and the open page’s note.
  • Holds the panel’s open state, closed at first.
  • AssistedPage, AssistedAction, AssistedInput, AssistedField, useAssistedTool, useAssisted, the panel and the devtools render inside it.

useAssisted

Section titled “useAssisted”
useAssisted(): {
  isOpen: boolean;
  open: (message?: string) => void;
  close: () => void;
  page: string | undefined;
}
Field Description
isOpen Whether the floating or sheet panel is open.
open(message?) Opens the panel. With a message, appends it to the thread as the user’s.
close() Closes the panel.
page The open assisted page’s name, or undefined.

Throws Render this inside an AssistedProvider outside the provider. The panel’s header reads page, and AssistedTrigger toggles isOpen.

See also

Section titled “See also”