Chat UI Components Chat building blocks from ui.inference.sh . Quick Start

Install chat components

npx shadcn@latest add https://ui.inference.sh/r/chat.json Components Chat Container import { ChatContainer } from "@/registry/blocks/chat/chat-container" < ChatContainer

{ / messages go here / } </ ChatContainer

Messages import { ChatMessage } from "@/registry/blocks/chat/chat-message" < ChatMessage role = " user " content = " Hello, how can you help me? " /> < ChatMessage role = " assistant " content = " I can help you with many things! " /> Chat Input import { ChatInput } from "@/registry/blocks/chat/chat-input" < ChatInput onSubmit = { ( message ) => handleSend ( message ) } placeholder = " Type a message... " disabled = { isLoading } /> Typing Indicator import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator" { isTyping && < TypingIndicator /> } Full Example import { ChatContainer , ChatMessage , ChatInput , TypingIndicator , } from "@/registry/blocks/chat" export function Chat ( ) { const [ messages , setMessages ] = useState ( [ ] ) const [ isLoading , setIsLoading ] = useState ( false ) const handleSend = async ( content : string ) => { setMessages ( prev => [ ... prev , { role : 'user' , content } ] ) setIsLoading ( true ) // Send to API... setIsLoading ( false ) } return ( < ChatContainer

{ messages . map ( ( msg , i ) => ( < ChatMessage key = { i } role = { msg . role } content = { msg . content } /> ) ) } { isLoading && < TypingIndicator /> } < ChatInput onSubmit = { handleSend } disabled = { isLoading } /> </ ChatContainer

) } Message Variants Role Description user User messages (right-aligned) assistant AI responses (left-aligned) system System messages (centered) Styling Components use Tailwind CSS and shadcn/ui design tokens: < ChatMessage role = " assistant " content = " Hello! " className = " bg-muted " />