AI Chat

FreeNew

A chat layout with a message log that stays scrolled to the newest message while replies stream, a jump-to-latest button, an empty state with suggestions and a footer for the input.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

label

scrollButtonLabel

contentClassName

value

contentClassName

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/ai-chat.json

Usage

import { Chat, ChatFooter, ChatMessages } from "@/components/ui/ai-chat"

<div className="h-[480px]">
  <Chat>
    <ChatMessages>
      {messages.map((m) => (
        <Message key={m.id} role={m.role}>
          <MessageContent>{m.text}</MessageContent>
        </Message>
      ))}
    </ChatMessages>
    <ChatFooter>
      <PromptInput onSubmit={send}>
        <PromptInputTextarea />
      </PromptInput>
    </ChatFooter>
  </Chat>
</div>

Props

Chat

A full-height column that holds the scroll state. Give it or its parent a height. Accepts all <div> props.

ChatMessages

Prop	Type	Default	Description
`label`	`string`	`"Conversation"`	Accessible name of the log.
`scrollButtonLabel`	`string`	`"Scroll to latest message"`	Accessible name of the jump-to-latest button.
`contentClassName`	`string`	-	Classes for the inner column (width, gap, padding).

Also accepts all <div> props.

ChatEmpty

Prop	Type	Default	Description
`icon`	`ReactNode`	-	Small mark above the title.
`title`	`ReactNode`	-	Headline, such as "How can I help?".
`description`	`ReactNode`	-	One line under the title.

Put ChatSuggestions in its children. Also accepts all <div> props.

ChatSuggestions

Prop	Type	Default	Description
`onSelect`	`(value: string) => void`	-	Called with a suggestion's value when it is clicked.

ChatSuggestion

Prop	Type	Default	Description
`value`	`string`	-	Text passed to `onSelect`. Defaults to the children when they are a string.

ChatFooter

Prop	Type	Default	Description
`contentClassName`	`string`	-	Classes for the inner column. Match `ChatMessages`.

Notes

The components hold no chat state. Render any message list inside ChatMessages, such as items from AI Message.
The log follows new content while the reader is at the bottom. Scrolling up releases it and shows the jump-to-latest button.
useChatScroll() returns { isAtBottom, scrollToBottom } for code inside Chat, for example to jump down after the user sends a message.

Accessibility

The scroll area is a log with aria-live="polite". It becomes a tab stop only when its content overflows, so keyboard users can scroll it.