repository·main·Indexed 21 days ago
https://github.com/blazity/shadcn-chatbot-kitA specialized toolkit for building AI-powered chatbot interfaces using shadcn/ui components and modern web technologies. It provides high-level components like Chat and DemoChat, as well as primitives such as ChatMessage, AudioVisualizer, and various copy-to-clipboard utilities. The kit is designed to integrate seamlessly with the @ai-sdk/react useChat hook.
The kit provides several built-in features for a complete chat experience:
The enableInterrupt feature provides a safety mechanism for stopping AI generation.
When enableInterrupt is enabled (default) and isGenerating is true:
stop function).To disable this behavior, set enableInterrupt={false}.
You can install the MarkdownRenderer component using the shadcn CLI or by manual installation.
Run the following command to add the component directly to your project:
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/markdown-renderer.jsonnpm install react-markdown remark-gfm shikiCopyButton: Ensure the CopyButton component is present in your project, as MarkdownRenderer depends on it.shiki color configuration to your tailwind.config.js (see Configure Shiki colors in Tailwind).npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/markdown-renderer.jsonYou can install the PromptSuggestions component using the shadcn CLI or by manually copying the source code into your project.
Run the following command to add the component directly via the registry:
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/prompt-suggestions.jsonThe MessageInput component is a rich textarea designed for AI chat interfaces. It supports auto-resizing, file attachments, and voice input.
import { MessageInput } from "@/components/ui/message-input"
export function BasicMessageInput() {
return (
<MessageInput
value={input}
onChange={handleInputChange}
isGenerating={false}
/>
)
}When enableInterrupt is true and isGenerating is true, pressing Enter once will prompt the user to press Enter again to interrupt the generation. This is useful for preventing accidental interruptions.
export function MessageInputWithInterrupt() {
return (
<MessageInput
value={input}
onChange={handleInputChange}
isGenerating={isGenerating}
stop={handleStop}
enableInterrupt={true}
/>
)
}To enable file attachments and drag-and-drop support, set allowAttachments to true and manage the files state.
import { MessageInput } from "@/components/ui/message-input"
export function MessageInputWithAttachments() {
const [files, setFiles] = useState<File[] | null>(null)
return (
<MessageInput
value={input}
onChange={handleInputChange}
isGenerating={false}
allowAttachments
files={files}
setFiles={setFiles}
/>
)
}Providing the transcribeAudio prop will automatically display the voice input button. This function handles the conversion of audio blobs to text.
<MessageInput
value={input}
onChange={handleInputChange}
isGenerating={false}
transcribeAudio={transcribeAudio}
/>import { MessageInput } from "@/components/ui/message-input"
export function BasicMessageInput() {
return (
<MessageInput
value={input}
onChange={handleInputChange}
isGenerating={false}
/>
)
}The kit is designed to work seamlessly with the Vercel AI SDK. To integrate, import the useChat hook from the Vercel AI SDK and pass its returned properties to the Chat component provided by the kit.
// Example pattern for Vercel AI SDK integration
import { useChat } from 'ai/react';
import { Chat } from '@blazity/shadcn-chatbot-kit'; // Hypothetical import path
export function MyChatComponent() {
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
return (
<Chat
messages={messages}
input={input}
handleInputChange={handleInputChange}
handleSubmit={handleSubmit}
isLoading={isLoading}
/>
);
}The shadcn-chatbot-kit is built on top of shadcn/ui. If your project does not already have shadcn/ui configured, you must install it first following the official shadcn/ui installation instructions.
Important: Ensure you are using the modern shadcn CLI rather than the legacy shadcn-ui CLI to avoid compatibility issues.
You can install the TypingIndicator component using the shadcn CLI or by manually copying the source code and configuring Tailwind CSS.
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/typing-indicator.jsonThe MessageList component renders a vertical list of chat messages. It supports displaying a typing indicator and can be customized using messageOptions to pass additional props to individual ChatMessage components.
import { MessageList } from "@/components/ui/message-list"
export function ChatDemo() {
const messages = [
{
id: "1",
role: "user",
content: "Hello, how are you?",
},
{
id: "2",
role: "assistant",
content: "I'm doing well, thank you for asking!",
},
]
return <MessageList messages={messages} isTyping={false} />
}If installing manually, you must add the typing-dot-bounce keyframes and animation to your tailwind.config.js file to enable the bouncing dot effect.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
"typing-dot-bounce": {
"0%,40%": { transform: "translateY(0)" },
"20%": { transform: "translateY(-0.25rem)" },
},
},
animation: {
"typing-dot-bounce": "typing-dot-bounce 1.25s ease-out infinite",
},
},
},
}You can install the Chat component using the shadcn CLI or by manually adding the necessary files and dependencies to your project.
Run the following command to add the component directly via the registry:
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat.jsonIf you prefer manual installation, follow these steps:
Chat component requires PromptSuggestions, MessageInput, MessageList, and ChatMessage. Ensure these are installed in your project first.components/ui/chat.tsxhooks/use-auto-scroll.tsYou can install the MessageInput component using the shadcn CLI or by manual installation.
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-input.jsonnpm install framer-motion@11 remeda@2FilePreview component is installed in your project (as MessageInput depends on it).components/ui/message-input.tsxhooks/use-autosize-textarea.tshooks/use-audio-recording.tsnpx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-input.json