chat

chat primitives

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/chat

slot-based architecture

each 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.

agent

how can I help?

inference shell ui demo

composition

import only what you need. ChatContainer, ChatMessages, ChatInput, MessageBubble, MessageStatusIndicator — wire them together in any layout.

custom-chat.tsxtsx
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>

built-in attachments

file and image upload buttons built in. auto-resizing textarea. submit on enter, shift+enter for newlines.

with attachmentstsx
// swap out the input for your own
<ChatContainer>
  <ChatMessages />
  <ChatInput
    placeholder="ask anything..."
    showAttachments={true}
    showImageUpload={true}
  />
</ChatContainer>

components

what's included.

chat container

flex layout wrapper with header, messages, and input slots. handles scroll position and auto-scroll on new messages.

message bubbles

user messages right-aligned with muted background, assistant messages left-aligned. role-based styling out of the box.

chat input

auto-resizing textarea with file attachment and image upload buttons. submit on enter, shift+enter for newlines.

status indicator

shows thinking/typing state between messages. animated dots while the agent is processing.

virtualized rendering

uses the virtualize block for 1000+ message conversations at 60fps. DOM only contains visible messages.

markdown rendering

assistant messages render markdown via pretext-md. code blocks, tables, images, embeds — all inline.

ready to ship?

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.