Package for adding customizable and re-usable chat components to your applications. Build beautiful chat interfaces in minutes.
shadcn-chat-ai.mp4
Build an AI support chatbot from scratch in less than five minutes! Find the code from the video here.
For full documentation check out the npm documentation
Note
Some of the components rely on shadcn-ui, so make sure to have it installed.
Use the add command to add components to your project.
It is recommended to install all components at once:
npx shadcn-chat-cli add --all
To view a list of all available components run the following command:
npx shadcn-chat-cli add
Otherwise, install individual components by running:
npx shadcn-chat-cli add [component]
All of the below primitives are unstyled and you can add styling in any way you'd like - for instance with className.
This is an example of how to quickly build stunning Chat UIs.
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
import { ChatBubble, ChatBubbleAvatar, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
import { ChatInput } from "@/components/ui/chat/chat-input";
<>
<ChatMessageList>
<ChatBubble>
<ChatBubbleAvatar />
<ChatBubbleMessage>
Message and other content here
</ChatBubbleMessage>
</ChatBubble>
</ChatMessageList>
<div className="flex-1" />
<ChatInput
placeholder="Type your message here..."
/>
<Button
size="sm" className="ml-auto gap-1.5">
Send Message
<CornerDownLeft className="size-3.5" />
</Button>
</>
For more comprehensive examples, check out this, this & this from the source code.
v.0.2.0 adds additional functionality by adding an expandable chat component that you can use in conjunction with the other components to quickly build a chat-support type feature in your application.
ChatSupport.tsx:
import { ChatBubble, ChatBubbleAvatar, ChatBubbleMessage } from '@/components/ui/chat/chat-bubble'
import { ChatInput } from '@/components/ui/chat/chat-input'
import { ExpandableChat, ExpandableChatHeader, ExpandableChatBody, ExpandableChatFooter } from '@/components/ui/chat/expandable-chat'
import { ChatMessageList } from '@/components/ui/chat/chat-message-list'
export default function ChatSupport() {
return (
<ExpandableChat
size='lg'
position='bottom-right'>
<ExpandableChatHeader className='flex-col text-center justify-center'>
<h1 className='text-xl font-semibold'>Chat with our AI ✨</h1>
<p>Ask any question for our AI to answer</p>
<div className='flex gap-2 items-center pt-2'>
<Button
variant='secondary'
>
New Chat
</Button>
<Button
variant='secondary'
>
See FAQ
</Button>
</div>
</ExpandableChatHeader>
<ExpandableChatBody>
<ChatMessageList>
<ChatBubble>
<ChatBubbleAvatar/>
<ChatBubbleMessage>
{message.content}
</ChatBubbleMessage>
</ChatBubble>
</ChatMessageList>
</ExpandableChatBody>
<ExpandableChatFooter>
<ChatInput />
<Button
type="submit" size="icon">
<Send className="size-4" />
</Button>
</ExpandableChatFooter>
</ExpandableChat>
)
}
And then use that component on all your sites by placing it in layout.tsx (Next.js)
layout.tsx:
<html lang="en">
<body>
</main>
{children}
<ChatSupport />
</main>
</body>
Check out this for a better overview of the api.