Components

Each page shows a 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. Everything here comes from @super-assist/react.

Package

What a page lends the assistant, from @super-assist/react and @super-assist/react/devtools:

• AssistedProvider: the runtime, the universal instructions, the built-in tools and the cards. 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 devtools with an Assisted pages tab.

Panel

AssistedPanel and its parts, one page per group:

• Roots and window: the one-liner, Floating, Sheet, Embedded, Launcher, Trigger and WindowControls.
• Header: Header, Footer, Icon, Title, PageLine, Close and Devtools.
• Threads: ThreadMenu, ThreadSelect, ThreadDrawerToggle, ThreadDrawer, ThreadTitle, NewThread and DeleteThread.
• Conversation: Conversation, EmptyState, Messages, FollowUps, HandoffOffer, Resolution, ScrollToBottom, HistorySkeleton, ConversationSearch and its toggle.
• Composer: Composer, Input, Attachments, AddAttachment, Dictate, ModelSelector and Send.
• Data parts: SettingsToggle, SettingsPanel, ContextDisplay, ContextBreakdown and QuotaBanner.

Cards

How a tool’s call shows in the conversation. The package brings them, and cards on AssistedProvider swaps them:

• Confirm card: asks before a consequential action or tool goes ahead.
• Choices card: the question offer_choices asks, with two to four answers.
• Links card: the pages show_links offers to open.
• Table card: records of one kind, from show_table.
• Spec card: one thing’s properties, from show_spec.
• Comparison card: two or three options side by side, from show_comparison.
• Sources card: the knowledge base passages under an answer, from search_knowledge.

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.