shadcn/app/content/docs/ai/chat.mdx

---
title: AI Chat
description: Complete chat interface with streaming support
---

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

<ComponentPreview name="ai-chat-demo" />

## 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

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash
npx @hanzo/ui@latest add ai-chat
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ai-chat" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx
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

| Prop           | Type                         | Default               | Description              |
| -------------- | ---------------------------- | --------------------- | ------------------------ |
| provider       | `string`                     | `"openai"`            | AI provider              |
| model          | `string`                     | `"gpt-3.5-turbo"`     | Model to use             |
| apiKey         | `string`                     | -                     | API key for provider     |
| welcomeMessage | `string`                     | -                     | Initial message          |
| placeholder    | `string`                     | `"Type a message..."` | Input placeholder        |
| streaming      | `boolean`                    | `true`                | Enable streaming         |
| history        | `Message[]`                  | `[]`                  | Initial chat history     |
| maxMessages    | `number`                     | -                     | Maximum messages to keep |
| onMessage      | `(message: Message) => void` | -                     | Message callback         |
| onError        | `(error: Error) => void`     | -                     | Error callback           |
| className      | `string`                     | -                     | Additional classes       |

## Examples

### With Custom Styling

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

### With Multiple Providers

```tsx
import { AIChat, AnthropicProvider, OpenAIProvider } 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

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