Related Posts
Continue reading with these related articles
Search for a command to run...
A clean, configurable AI chat component that anyone can easily integrate and customize for their needs.
Continue reading with these related articles
Built with composable components following shadcn/ui patterns
The AI Assistant component is built with shadcn/ui patterns for maximum composability and customization.
pnpm dlx shadcn@latest add https://yash.reactopia.me/r/minimal-ai-assistant.json
import {
AiAssistantProvider,
AiAssistantTrigger,
AiAssistantChat,
AiAssistantHeader,
AiAssistantHeaderTitle,
AiAssistantHeaderActions,
AiAssistantMessages,
AiAssistantEmptyState,
AiAssistantMessageList,
AiAssistantInput,
} from "@/components/ai-assistant";export function AiAssistantDemo() {
return (
<AiAssistantProvider
onMessageSent
Built with composable components following shadcn/ui patterns
<AiAssistantProvider>
<AiAssistantTrigger variant="outline">Custom Chat</AiAssistantTrigger>
<AiAssistantChat>
<AiAssistantHeader>
<AiAssistantHeaderTitle>My Assistant</AiAssistantHeaderTitle>
<AiAssistantHeaderActions />
</AiAssistantHeader>
<AiAssistantMessages>
<AiAssistantEmptyState suggestions={["Hello",
import { AiAssistant } from "@/components/ai-assistant";
export function App() {
return (
<AiAssistant
title="My AI Assistant"
placeholder="Ask me anything..."
suggestions={[
"What can you help with?",
"Tell me a joke",
"How does this work?",
]}
maxInputLength={1000}
onMessageSent={(