120 lines
2.7 KiB
Markdown
120 lines
2.7 KiB
Markdown
# 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
|