Skip to content
super-assist

Components

Each page shows one component in the example shop, in your docs theme: what it lends the assistant, its smallest usage, the exact text the model receives, its states, and its props.

Package

Section titled “Package”

From @super-assist/react and @super-assist/react/devtools:

  • AssistedProvider: the runtime, the universal instructions and the built-in tools. With useAssisted.
  • AssistedPage: a page, or a dialog over it, introduces itself.
  • AssistedAction: an element the assistant presses, rings or asks about. With useAssistedAction, ring and useRing.
  • AssistedInput: a native field the assistant fills. With useAssistedInput.
  • AssistedField: a control that keeps its value in state.
  • useAssistedTool: a tool that runs in the browser.
  • AssistedDevtools: the Assisted pages tab in assistant-ui’s devtools.

Panel (registry)

Section titled “Panel (registry)”

Copied into your app from the registry:

  • AssistedPanel: the conversation, floating, as a sheet beside the page, or embedded.
  • AssistedTrigger: the button that opens and closes the panel.
  • Confirm card: asks before a consequential action or tool goes ahead.
  • Links card: the pages show_links offers to open.
  • Choices card: the question offer_choices asks, with two to four answers.

The screenshots are of the example app. Its tool calls run in the page as they would for a model, but the conversations are seeded, so the user’s and the assistant’s sentences are written for the picture.