Complete chat block — conversation sidebar, grouped messages, streaming markdown replies and a composer — driven by a local mock assistant.
aichatblockassistantsidebarstreamingapp
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/chat-app
Also installs: Prompt Input, Message Bubble, Token Stream, Copy Button
Usage
usage.tsx
1import { ChatApp } from "@/components/ai/chat-app";
2
3export default function Page() {
4 return (
5 <ChatApp
6 assistantName="Acme Assistant"
7 getReply={(prompt) => `You asked: **${prompt}**`}
8 />
9 );
10}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
conversations | ChatConversation[] | — | Initial sidebar conversations; the first one opens. |
getReply | (prompt: string, attachments: PromptAttachment[]) => string | — | Markdown reply for the mock assistant. Replace with your model call. |
models | PromptModel[] | — | Options for the composer's model pill. |
suggestions | string[] | — | Starter prompts on an empty conversation. |
assistantName | string | "GetUrUI Assistant" | Shown in the sidebar and to screen readers. |
Accessibility
- Messages are a polite live log; the stop button cancels a reply mid-stream.
- The sidebar is a nav with aria-current on the open conversation; on narrow containers it becomes a drawer that closes on Escape.
- Composer submits on Enter, Shift+Enter adds a line.