ai-elements-chatbot

# AI Elements Chatbot Components

**Status**: Production Ready ✅ | **Last Verified**: 2025-11-18

---

## What Is AI Elements?

Production-ready chat UI components for AI applications:
- Built on shadcn/ui
- 30+ components (Message, Conversation, Response, etc.)
- Works with Vercel AI SDK v5
- Streaming support
- Tool/function call displays
- Reasoning visualization

---

## Quick Start (15 Minutes)

### Prerequisites

- Next.js 15+ (App Router)
- shadcn/ui initialized
- Tailwind v4
- AI SDK v5+

### 1. Initialize

```bash
pnpm dlx ai-elements@latest init
```

### 2. Add Components

```bash
pnpm dlx ai-elements@latest add message conversation response prompt-input
```

### 3. Create Chat Interface

```typescript
'use client';

import { useChat } from 'ai/react';
import { Conversation } from '@/components/ui/ai/conversation';
import { Message } from '@/components/ui/ai/message';
import { Response } from '@/components/ui/ai/response';
import { PromptInput } from '@/components/ui/ai/prompt-input';

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat'
  });

  return (
    <div className="flex h-screen flex-col">
      <Conversation>
        {messages.map((msg) => (
          <Message key={msg.id} role={msg.role}>
            <Response markdown={msg.content} />
          </Message>
        ))}
      </Conversation>

      <PromptInput
        value={input}
        onChange={handleInputChange}
        onSubmit={handleSubmit}
      />
    </div>
  );
}
```

**Load `references/setup-guide.md` for complete setup.**

---

## Core Components

### Message & Conversation

```typescript
import { Conversation } from '@/components/ui/ai/conversation';
import { Message } from '@/components/ui/ai/message';

<Conversation>
  {messages.map((msg) => (
    <Message key={msg.id} role={msg.role}>
      {msg.content}
    </Message>
  ))}
</Conversation>
```

### Response (Markdown)

```typescript
import { Respons