AIUI - Web Chat Interface

A modern, responsive web interface for AI chat with OpenAI-compatible API support and streaming responses.

Features

💬 Real-time streaming chat responses
🌙 Beautiful dark theme
📱 Fully responsive (desktop + mobile)
🔧 Customizable API settings (base URL, model, API key)
📜 Multiple conversation support
✨ Markdown rendering with syntax highlighting
⚡ Built with React + TypeScript + Tailwind CSS + Vite

Project Structure

AIUI/
├── frontend/          # React frontend
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── hooks/         # Custom hooks
│   │   ├── services/      # API services
│   │   ├── stores/        # State management (Zustand)
│   │   ├── types/         # TypeScript types
│   │   └── utils/         # Utilities
│   └── package.json
├── backend/           # Express proxy server
│   └── src/
│       └── index.js
├── package.json       # Root package.json with workspace scripts
└── README.md

Quick Start

Prerequisites

Node.js 18+
npm

1. Install Dependencies

# Install root dependencies
npm install

# Install backend dependencies
cd backend && npm install && cd ..

# Install frontend dependencies
cd frontend && npm install && cd ..

2. Start the Application

# Start both frontend and backend
npm run dev

Or start them separately:

# Terminal 1 - Backend (port 3001)
npm run backend

# Terminal 2 - Frontend (port 3000)
npm run frontend

3. Open in Browser

Navigate to http://localhost:3000

Usage

Configure API: Click the settings icon (⚙️) in the top right to set your:
- API Base URL (e.g., https://api.openai.com/v1)
- API Key
- Model name (e.g., gpt-4o-mini, gpt-4o)
Start Chatting: Click "New Chat" and send a message!
Mobile: The sidebar is collapsible - use the ☰ button to toggle it.

Development

Build for Production

npm run build

Build Frontend Only

cd frontend && npm run build

API Configuration

The interface supports any OpenAI-compatible API:

Provider	Base URL	Example Models
OpenAI	`https://api.openai.com/v1`	gpt-4o-mini, gpt-4o
OpenRouter	`https://openrouter.ai/api/v1`	varies
Local (Ollama)	`http://localhost:11434/v1`	llama2, mistral
Custom	Your endpoint	Your models

Tech Stack

Frontend: React 18, TypeScript, Tailwind CSS, Vite, Zustand, Lucide Icons
Backend: Express, CORS, node-fetch
Build: TypeScript Compiler, Vite

License

MIT