chat ui
visual building blocks: chat container, messages, input, and status indicators.
examples
chat container
grid layout wrapper with structure: header, messages (scrollable), and input.
preview
header slot
Hello! Can you help me?
Of course! I'd be happy to help. What do you need assistance with?
message bubble
styled container for messages. user messages align right with background, assistant messages align left without background.
preview
This is a user message with a muted background.
This is an assistant message that renders **markdown** and can include `code blocks`, lists, and other formatting.
User messages are right-aligned and capped at 70% width for readability.
chat input
auto-resizing textarea with file upload support, drag-and-drop, and @file references for uploaded files.
preview
message status indicator
shows when the assistant is thinking or generating a response.
preview
thinking...
installation
bash
1npx shadcn@latest add https://ui.inference.sh/r/chatusage
chat provides low-level primitives for building chat interfaces. these components work with the agent block which provides the context and state management.
tsx
1import { ChatContainer } from '@/components/chat/chat-container'2import { ChatInput } from '@/components/chat/chat-input'3import { ChatMessages } from '@/components/chat/chat-messages'4import { MessageBubble } from '@/components/chat/message-bubble'5import { MessageContent } from '@/components/chat/message-content'67export function Chat() {8 return (9 <ChatContainer>10 <ChatMessages>11 <MessageBubble message={userMessage}>12 <MessageContent message={userMessage} />13 </MessageBubble>14 <MessageBubble message={assistantMessage}>15 <MessageContent message={assistantMessage} />16 </MessageBubble>17 </ChatMessages>18 <ChatInput />19 </ChatContainer>20 )21}