AI composerPro
A focused assistant thread where messages lift out of the composer and replies stream in.
Product questions
Tandem assistant
The 20% annual discount lifted annual plan share from 31% to 38% across 4,212 checkouts. Revenue per visitor held flat at $2.41, because more of those teams picked Starter over Team.
I would let it run through Friday before calling it.
- An in-product assistant or chat panel.
- Chats with file attachments and suggested questions.
- Replies that stream in with a thinking shimmer, a stop control, and copy buttons.
- Use support-conversation for chats with human agents.
- Use command-palette for quick actions and search.
- Use text-stream on its own when you already have a chat layout.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this for an in-product assistant. Connect onSend to your model endpoint and stream its tokens into the reply; files and replies in the preview are simulated.
import { AiComposer } from "@/registry/blocks/ai-composer/ai-composer"; export function Assistant() { return ( <AiComposer onSend={({ text, files }) => fetch("/api/chat", { method: "POST", body: JSON.stringify({ text, files }) }) } /> );}AiComposer
An assistant thread with a composer, sample file attachments, suggested questions, and streamed replies with copy buttons. Replies and attachments are simulated.
onSend(message: { text: string; files: string[] }) => void–Called with the text and attached file names each time a message is sent.- Enter
- Sends the message. Ignored during IME composition.
- Shift+Enter
- Inserts a new line.
- Escape
- Stops a reply that is streaming.
- Suggested questions are a labelled group of buttons.
- Sending, streaming, and stopping are announced through a visually hidden role="status" region.
- Sent messages lift out of the composer into the thread, and replies stream in with a shimmer while thinking.
- Reduced motion removes the lift and shows replies without the travel animation.
- The panel is up to 760px wide and 660px tall; below 560px it drops to 620px, hides the keyboard hint, and widens bubbles to 86%.
- Copy buttons on sent messages show on hover for mouse and are always visible on touch.
- The thread is not virtualized; long histories grow the DOM, so trim or paginate old messages.
- A ResizeObserver measures the composer so the thread keeps room for it.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for an in-product assistant or chat panel.
- onSend only reports the message; the reply is simulated inside the block, so stream your model's tokens into the reply state instead.
- Composes Arc copy-button, text-stream, and text-shimmer.
The full library index for assistants is at /llms.txt.