ZaiAI Chatbot

Next-Gen Conversational Interface Powered by GLM-4.7-Flash

Overview

ZaiAI Chatbot is a state-of-the-art conversational AI application engineered for performance and elegance. Built with a FastAPI backend and a React + Shadcn UI frontend, it delivers a seamless, low-latency chat experience akin to premium SaaS products.

It features real-time streaming, rich markdown rendering, syntax highlighted code blocks, and a fully responsive mobile-first design.

---

Key Features

Premium User Interface

• SaaS-Grade Aesthetics: Glassmorphism effects, smooth gradients, and refined typography.
• Dark Mode Perfected: A professionally curated zinc/slate palette for eye comfort and style.
• Micro-Interactions: Pulse animations, smooth transitions, and typing indicators.

High-Performance Streaming

• Instant Response: Optimized Server-Sent Events (SSE) pipeline for near-zero Time-To-First-Token (TTFT).
• Auto-Scrolling: Smart sticky scrolling logic that keeps up with the conversation.

Rich Content Support

• Markdown Rendering: Full support for lists, bolding, italics, and links.
• Code Syntax Highlighting: VSCode-style dark theme for code blocks with auto-language detection.
• One-Click Copy: integrated copy buttons for all code snippets.

Robust Responsiveness

• Mobile Optimized: Custom layouts for small screens using 100dvh and scaled typography.
• Adaptive Input: Sticky input bar that never gets hidden by virtual keyboards.

Modern Tooling

• Fast Backend: Leveraging uv for lightning-fast python package management.
• Strict Typing: Full Pydantic v2 validation for all API data flows.
• Modular Architecture: Clean separation of concerns (Service/Route/Schema pattern).

---

Technology Stack

Frontend

• Framework: React 19 + Vite
• Styling: Tailwind CSS + Tailwind Animate
• Components: Radix UI (Headless) + Shadcn UI
• Utilities: lucide-react (icons), react-markdown, react-syntax-highlighter

Backend

• Framework: FastAPI (Python 3.10+)
• AI Engine: Zai SDK (GLM-4 Model)
• Validation: Pydantic v2
• Package Manager: uv (The Astral project)
• Server: Uvicorn (ASGI)

---

Getting Started

Prerequisites

• Node.js v18+
• Python 3.10+
• uv (Extremely fast Python package installer and resolver)
• Zai SDK API Key

1. Backend Setup

We use uv for high-performance dependency management.

cd backend

# Create virtual environment and install dependencies
uv venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
uv sync

Create a .env file in backend/:

# Required for Zai SDK
ZAI_API_KEY=your_api_key_here

# Optional Configurations
ZAI_MODEL=glm-4.7-flash
CORS_ORIGINS=http://localhost:5173

Run the server:

uv run uvicorn main:app --reload

Server running at http://localhost:8000

2. Frontend Setup

cd frontend
npm install
npm run dev

App running at http://localhost:5173

---

System Architecture

+---------------------+       +----------------------+       +-----------------------+
|  🖥️ Client Side      |       |  ☁️ Server Side      |       |  🧠 AI Provider       |
|                     |       |                      |       |                       |
|  [ React 19 UI ]    | <==>  |  [ FastAPI Backend ] | <==>  |  [ GLM-4.7 Model ]    |
|  (Shadcn + Vite)    | HTTP  |  (Python + uv)       | SDK   |  (Inference Cloud)    |
+----------+----------+       +-----------+----------+       +-----------+-----------+
           |                              |                              |
           | 1. User Types Message        | 2. POST /chat/stream         |
           |                              |                              |
           v                              v                              v
+----------+----------+       +-----------+----------+       +-----------+-----------+
|  🎨 Renders Stream  | <==== |  ⚡ Relays Tokens    | <==== |  🌊 Generates Chunks  |
+---------------------+  SSE  +----------------------+ Stream+-----------------------+

---

Designed with ❤️ by NYAGANYA