AI Chat

PreviousNext

Complete chat interface with streaming support

A complete chat interface component with support for streaming responses, message history, and multiple AI providers.

Features

  • 💬 Full chat interface with message bubbles
  • 🔄 Real-time streaming responses
  • 📝 Markdown support with syntax highlighting
  • 🎨 Customizable themes and styles
  • 💾 Conversation persistence
  • 🔍 Search through chat history
  • 📱 Mobile-responsive design
  • ♿ Fully accessible

Installation

npx hanzo-ui@latest add ai-chat

Usage

import { AIChat } from "@hanzo/ui"

export default function ChatPage() {
  return (
    <AIChat
      provider="openai"
      model="gpt-4"
      apiKey={process.env.OPENAI_API_KEY}
      welcomeMessage="Hello! How can I help you today?"
      placeholder="Type your message..."
      onMessage={(message) => console.log(message)}
    />
  )
}

Props

PropTypeDefaultDescription
providerstring"openai"AI provider
modelstring"gpt-3.5-turbo"Model to use
apiKeystring-API key for provider
welcomeMessagestring-Initial message
placeholderstring"Type a message..."Input placeholder
streamingbooleantrueEnable streaming
historyMessage[][]Initial chat history
maxMessagesnumber-Maximum messages to keep
onMessage(message: Message) => void-Message callback
onError(error: Error) => void-Error callback
classNamestring-Additional classes

Examples

With Custom Styling

<AIChat
  className="h-[600px] border rounded-lg"
  messageClassName="p-4"
  inputClassName="border-t"
/>

With Multiple Providers

import { AIChat, OpenAIProvider, AnthropicProvider } from "@hanzo/ui"

const providers = [
  new OpenAIProvider({ apiKey: process.env.OPENAI_API_KEY }),
  new AnthropicProvider({ apiKey: process.env.ANTHROPIC_API_KEY })
]

export default function ChatPage() {
  return (
    <AIChat
      providers={providers}
      defaultProvider="openai"
      showProviderSelector
    />
  )
}

With System Prompt

<AIChat
  systemPrompt="You are a helpful coding assistant. Provide clear, concise answers with code examples when appropriate."
  provider="openai"
  model="gpt-4"
/>