Hugging Face's logo

Spaces:
Hanzo-Community
/
ai-chat
Runtime error

App Files Community
ai-chat
File size: 3,448 Bytes
35799ec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
# 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)