shadcn.io is not affiliated with official shadcn/ui
AI Assistant Introduction Onboarding Block for React Aria
A research notebook's assistant introducing itself: a popover over a drawn notebook with a greeting, three capability buttons that fill the box with a sample prompt, a field with Send, and replies typed in advance.
Installation
Overview
Introduce an assistant before anyone has to guess what to ask, with this first hello for React with React Aria. It opens from the launcher of Marginmoor, a research notebook: a drawn notebook (a list of notes and an open page) with a round outline Button, Ask Marginmoor, at its foot, and over it a Popover. The popover greets Rowan, lists three things it can do as buttons that fill the box with a sample prompt (summarise a note, find a claim, draft questions), and has a field with Send, the one Shine Button. The reply is typed in advance for this demo, two lines and “Sources: 3 notes”; any other text answers that only the three sample prompts have answers. Maybe later closes it and puts focus back on the launcher. For preview the popover is drawn open in place when the page loads; the launcher opens the real Popover with the same content. No model is called.
FAQ
Why is the popover already open, and what do I keep?
So you can see it without a click. On load the popover is a copy drawn in place above the launcher: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The launcher opens the real Popover, non-modal, with Escape and focus returning to the launcher, and the copy stays closed until a reload. Both show the same AssistantBody component and the same state. In your app keep the Popover and drop the copy: the "in-place" state, the dialog and its Escape effect.
Where do the replies come from?
From three typed strings in PROMPTS, matched against the box when you press Send: the text of a sample prompt, ignoring case and spaces at the ends, gets that prompt's reply; any other text gets “In this demo only the three sample prompts have answers”; an empty box asks you to type something. No model, search or network is involved, and the reply says it was typed in advance.
What stays local in the demo, and how do I connect a real assistant?
Everything: the question, the reply and the notes it cites are typed in the file, and nothing leaves the page. To connect your own, replace the body of send with a request to your assistant, show a loading line in the reply box while it runs, and render its answer and its sources in the same three lines. Keep the “typed in advance” label only for the sample replies.
How does it work from the keyboard?
Press the launcher with Enter or Space; focus moves into the field. The three capability buttons are in the tab order before it, a prompt fills the field and keeps focus there, and Enter in the field sends. Escape closes the popover and returns focus to the launcher, as does Maybe later. A polite status line says what was filled in, what was answered and when it closed. React Aria focuses the popover itself when it opens, so the block moves focus into the field a frame later.
How does it look on a phone?
The popover is the width of the screen less a margin and sits above the launcher; the capability lines show only their names to save room, and the real popover is capped to the height of the screen and scrolls inside if it needs to. The reply box keeps its height, so nothing moves when an answer arrives.