# 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

```bash
# 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

```bash
# Start both frontend and backend
npm run dev
```

Or start them separately:

```bash
# 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

1. **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`)

2. **Start Chatting**: Click "New Chat" and send a message!

3. **Mobile**: The sidebar is collapsible - use the ☰ button to toggle it.

## Development

### Build for Production

```bash
npm run build
```

### Build Frontend Only

```bash
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