chat container
flex layout wrapper with header, messages, and input slots. handles scroll position and auto-scroll on new messages.
chat
composable building blocks for any chat UI. container, messages, input, status indicators. use them together or pick what you need.
pnpm dlx shadcn@latest add @inferencesh/chateach piece is a separate component. compose them however you want, or use the agent block for the full stack. container, messages, input, status — all independent slots.
how can I help?
inference shell ui demo
import only what you need. ChatContainer, ChatMessages, ChatInput, MessageBubble, MessageStatusIndicator — wire them together in any layout.
import { ChatContainer, ChatMessages, ChatInput, MessageBubble, MessageStatusIndicator, } from '@inference/ui/chat' <ChatContainer> <ChatMessages> {messages.map(msg => ( <MessageBubble key={msg.id} role={msg.role}> {msg.content} </MessageBubble> ))} <MessageStatusIndicator status={status} /> </ChatMessages> <ChatInput onSubmit={handleSubmit} /> </ChatContainer>
file and image upload buttons built in. auto-resizing textarea. submit on enter, shift+enter for newlines.
// swap out the input for your own <ChatContainer> <ChatMessages /> <ChatInput placeholder="ask anything..." showAttachments={true} showImageUpload={true} /> </ChatContainer>
components
flex layout wrapper with header, messages, and input slots. handles scroll position and auto-scroll on new messages.
user messages right-aligned with muted background, assistant messages left-aligned. role-based styling out of the box.
auto-resizing textarea with file attachment and image upload buttons. submit on enter, shift+enter for newlines.
shows thinking/typing state between messages. animated dots while the agent is processing.
uses the virtualize block for 1000+ message conversations at 60fps. DOM only contains visible messages.
assistant messages render markdown via pretext-md. code blocks, tables, images, embeds — all inline.
start with the hosted platform. deploy your own when you're ready.
we use cookies
we use cookies to ensure you get the best experience on our website. for more information on how we use cookies, please see our cookie policy.
by clicking "accept", you agree to our use of cookies.
learn more.