Docs
Chat

Chat

A composable and customizable chat interface component.

Try these prompts ✨

The Chat component provides a complete chat interface with message history, typing indicators, file attachments support, and auto-scrolling behavior.

Features

  • Message history display
  • Real-time typing indicators
  • File attachment support
  • Auto-scrolling with manual override
  • Prompt suggestions for empty states
  • Stop generation capability
  • Fully customizable styling

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat.json

Usage

Basic Usage

"use client"
 
import { useChat } from "ai/react"
 
import { Chat } from "@/components/ui/chat"
 
export function ChatDemo() {
  const { messages, input, handleInputChange, handleSubmit, status, stop } =
    useChat()
 
  const isLoading = status === "submitted" || status === "streaming"
 
  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
    />
  )
}

With Prompt Suggestions

"use client"
 
import { useChat } from "ai/react"
 
import { Chat } from "@/components/ui/chat"
 
export function ChatWithSuggestions() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    append,
    status,
    stop,
  } = useChat()
 
  const isLoading = status === "submitted" || status === "streaming"
 
  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
      append={append}
      suggestions={[
        "Generate a tasty vegan lasagna recipe for 3 people.",
        "Generate a list of 5 questions for a frontend job interview.",
        "Who won the 2022 FIFA World Cup?",
      ]}
    />
  )
}

Custom Implementation

You can also use the individual components to build your own chat interface:

"use client"
 
import { useChat } from "ai/react"
 
import { ChatContainer, ChatForm, ChatMessages, PromptSuggestions } from "@/components/ui/chat"
import { MessageInput } from "@/components/ui/message-input"
import { MessageList } from "@/components/ui/message-list"
import { PromptSuggestions } from "@/components/ui/prompt-suggestions"
 
export function CustomChat() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    append,
    status,
    stop,
  } = useChat()
 
  const isLoading = status === 'submitted' || status === 'streaming'
  const lastMessage = messages.at(-1)
  const isEmpty = messages.length === 0
  const isTyping = lastMessage?.role === "user"
 
  return (
    <ChatContainer>
      {isEmpty ? (
        <PromptSuggestions
          append={append}
          suggestions={["What is the capital of France?", "Tell me a joke"]}
        />
      ) : null}
 
      {!isEmpty ? (
        <ChatMessages>
          <MessageList messages={messages} isTyping={isTyping} />
        </ChatMessages>
      ) : null}
 
      <ChatForm
        className="mt-auto"
        isPending={isLoading || isTyping}
        handleSubmit={handleSubmit}
      >
        {({ files, setFiles }) => (
          <MessageInput
            value={input}
            onChange={handleInputChange}
            allowAttachments
            files={files}
            setFiles={setFiles}
            stop={stop}
            isGenerating={isLoading}
          />
        )}
      </ChatForm>
    </ChatContainer>
  )
}

Chat

A prebuilt Chat component that provides a complete chat interface with message history, typing indicators, file attachments support, and auto-scrolling behavior.

Props

PropTypeDescription
messagesMessage[]Array of chat messages to display
inputstringCurrent input value
handleInputChange(e: React.ChangeEvent<HTMLTextAreaElement>) => voidInput change handler
handleSubmit(event?, options?) => voidForm submission handler
isGeneratingbooleanWhether AI is currently generating a response
stop() => voidFunction to stop AI generation
setMessages(messages: Message[]) => voidOptional function to update messages state. When provided, enables enhanced tool cancellation handling
append?(message: Message) => voidFunction to append a new message (required for suggestions)
suggestions?string[]Array of prompt suggestions to show when chat is empty
onRateResponse?(messageId: string, rating: "thumbs-up" | "thumbs-down") => voidCallback to handle user rating of AI responses, if not provided the rating buttons will not be displayed
className?stringAdditional CSS classes for ChatContainer
transcribeAudio(blob: Blob) => Promise<string>Function to transcribe audio (required for voice input, see message input docs for more info)

ChatContainer

A container component that wraps the whole chat interface. Used to build your own chat if not using the default Chat component.

Props

PropTypeDescription
childrenReactNodeChild components to render
classNamestringAdditional CSS classes for Chat

ChatMessages Component

Provides a message list with auto-scrolling behavior, and typing indicators. Used to build your own chat if not using the default Chat component.

Props

PropTypeDescription
messagesMessage[]Array of messages to display
isTypingbooleanWhether to show typing indicator

ChatForm Component

A form component that wraps the message input and submit button, handles the state management for file uploads internally and uses a render function to pass them down to your input component. Used to build your own chat if not using the default Chat component.

Props

PropTypeDescription
isPendingbooleanWhether form submission is pending
handleSubmit(event?, options?) => voidForm submission handler
className?stringAdditional CSS classes
children(props: { files: File[] | null, setFiles: Function }) => ReactElementRender function for form content

Theming

The Chat component is using theme colors and fully themable with CSS variables.

InstallationMessage Input