# Ai Chat Interface

Modern chat UI with streaming responses and markdown support

Built with [@hanzo/ui](https://github.com/hanzoai/ui) components - a modern React component library based on Radix UI and Tailwind CSS.

## 🚀 Quick Start

### Deploy to Hanzo Cloud

[![Deploy to Hanzo Cloud](https://img.shields.io/badge/Deploy%20to-Hanzo%20Cloud-purple?style=for-the-badge&logo=rocket)](https://hanzo.app/deploy?template=https://github.com/hanzoai/template-ai-chat-interface)

**Instant deployment** - Click to deploy this template to Hanzo Cloud. If you're not signed in, we'll create a public repo for you and you can start editing immediately!

### Edit on Hanzo

[![Edit on Hanzo](https://img.shields.io/badge/Edit%20on-Hanzo-blue?style=for-the-badge&logo=react)](https://hanzo.app/edit/github/hanzoai/template-ai-chat-interface)

**Cloud IDE** - Click to open this template in Hanzo's cloud development environment. No local setup required!

### Local Development

```bash
# Clone this template
git clone https://github.com/hanzoai/template-ai-chat-interface.git
cd ai-chat-interface

# Install dependencies
npm install
# or
pnpm install

# Start development server
npm run dev
# or
pnpm dev

# Open http://localhost:3000
```

## 🚢 Deploy to Hugging Face

This template includes a built-in publish option for Hugging Face Spaces:

1. **Login to Hugging Face** in your terminal:
   ```bash
   huggingface-cli login
   ```

2. **Use the built-in publish command**:
   ```bash
   npm run publish-hf
   # or
   pnpm publish-hf
   ```

   This will automatically:
   - Create a new Space in your HF account
   - Configure it for Next.js deployment
   - Push all necessary files
   - Your app will be live at: `https://huggingface.co/spaces/YOUR_USERNAME/ai-chat-interface`

3. **Or manually push** to an existing Space:
   ```bash
   git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/ai-chat-interface
   git push hf main
   ```

## 🎨 Features

- **Modern Design**: Clean, responsive UI with violet/purple theme
- **Streaming Responses**: Real-time message streaming
- **Markdown Support**: Rich text formatting in messages
- **Dark Mode**: Built-in dark mode support
- **TypeScript**: Full type safety
- **Production Ready**: Optimized for performance

## 📦 What's Included

- Next.js 14 with App Router
- React 18 with Server Components
- TypeScript configuration
- Tailwind CSS with custom theme
- ESLint and Prettier configs
- @hanzo/ui component library
- Lucide React icons
- Hugging Face deployment config

## 🛠️ Customization

### Theme Colors

Edit `tailwind.config.js` to customize the color scheme:

```js
theme: {
  extend: {
    colors: {
      primary: {
        DEFAULT: "hsl(var(--primary))",
        foreground: "hsl(var(--primary-foreground))",
      },
      // Add your custom colors
    }
  }
}
```

### Components

All UI components are in `components/ui/`. They're built with:
- Radix UI primitives for accessibility
- Tailwind CSS for styling
- Full TypeScript support

## 📚 Documentation

- [Hanzo Documentation](https://hanzo.app/docs)
- [@hanzo/ui Components](https://github.com/hanzoai/ui)
- [Template Gallery](https://huggingface.co/spaces/hanzo-community/gallery)

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details.

---

Built with ❤️ by [Hanzo AI](https://hanzo.ai)