Loading...
Loading...
> Production-ready chat interface with streaming, history, and multi-model support.
The AI Chat component provides a complete conversational interface similar to ChatGPT or Claude. It handles real-time message streaming, conversation history persistence, model selection, and markdown rendering. Designed with the strict Terminal aesthetic, it's ready to drop into your application.
DESC: Ensure you have the necessary UI primitives installed.
1$npm install lucide-react clsx tailwind-merge
DESC: Import the chat component into your page.
1import { AiChat } from '@/components/library/ai-chat';
Render the chat component with a handler for sending messages.
1export default function Page() {2 const handleSend = async (msg, attachments, model) => {3 // Your API call here4 await fetch('/api/chat', {5 method: 'POST',6 body: JSON.stringify({ msg, model })7 });8 };910 return <AiChat onSendMessage={handleSend} />;11}
Load previous conversation history.
1<AiChat2 initialMessages={[3 { role: 'user', content: 'Hello' },4 { role: 'assistant', content: 'Hi there!' }5 ]}6/>
| Option | Type | Default | Description |
|---|---|---|---|
| initialMessages | Message[] | [] | Array of messages to preload. |
| defaultModelId | string | "gpt-4o" | Default selected model ID. |
| onSendMessage | function | undefined | Async callback for message submission. |
The chat interface is modular, composed of smaller parts for easy customization: