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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { AiComposer } from 'animui/ai-composer';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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 animui copy-button, text-stream, and text-shimmer.
The full library index for assistants is at /llms.txt.