README.bak.md

Ai Chat Interface

Modern chat UI with streaming responses and markdown support

Built with @hanzo/ui components - a modern React component library based on Radix UI and Tailwind CSS.

🚀 Quick Start

Deploy to Hanzo Cloud

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

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

Local Development

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

   huggingface-cli login
   

2. Use the built-in publish command:

   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:

   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:

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
• @hanzo/ui Components
• Template Gallery

🤝 Contributing

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

📄 License

MIT License - see LICENSE file for details.

---

Built with ❤️ by Hanzo AI