🤖 Local LLM Chat UI

A sleek, modern AI chat interface built with React + TypeScript + Vite. Chat with local models via Ollama or any OpenAI-compatible external API — all from one unified UI.

---

✨ Features

• Dual Provider Support — Switch between local Ollama models and external OpenAI-compatible APIs
• Thinking Mode — Toggle between Fast and Thinking processing modes to view the model's reasoning process
• Auto Model Discovery — Automatically detects and lists installed Ollama models
• Model Management — Start/stop Ollama models directly from the UI
• Theme Picker — Choose from 4 color themes (Terracotta, Blue, Green, Red)
• System Prompt — Customize the AI's behavior with a configurable system prompt
• Keyboard Shortcuts — Press Enter to send, Shift+Enter for new line
• Privacy First — API keys are stored only in browser memory, never persisted

---

🚀 Getting Started

Prerequisites

• Node.js (v18+)
• Ollama (optional, for local models)

Installation

# Clone the repository
git clone https://github.com/your-username/Local-LLM-ChatUI.git
cd Local-LLM-ChatUI

# Install dependencies
npm install

# Start the dev server
npm run dev

The app will be available at http://localhost:5173.

Production Build

npm run build
npm run preview

---

🛠️ Usage

1. Choose a Provider from the sidebar:

   • Local (Ollama) — Set the base URL (default: http://localhost:11434) and select a model from the auto-detected list, or type a custom model name.
   • External API — Enter the API base URL, your API key, and the model name (e.g., gpt-4.1-mini).

2. Select Processing Mode:

   • Fast — Standard response generation.
   • Thinking — Enables chain-of-thought reasoning (toggle "Show thinking" in the chat header to view it).

3. Set a System Prompt (optional) — Customize how the assistant behaves.

4. Start chatting!

---

📂 Project Structure

Local-LLM/
├── public/
│   ├── favicon.svg
│   └── icons.svg
├── src/
│   ├── assets/
│   ├── App.tsx          # Main application component
│   ├── App.css          # Component-specific styles
│   ├── index.css        # Global styles & theme system
│   └── main.tsx         # React entry point
├── index.html           # HTML template
├── vite.config.ts       # Vite configuration
├── tsconfig.json        # TypeScript configuration
└── package.json

---

🎨 Themes

The app ships with 4 built-in color themes, selectable from the sidebar:

Theme	Description
🟤 Terracotta	Warm, earthy tones (default)
🔵 Blue	Cool, professional palette
🟢 Green	Fresh, nature-inspired
🔴 Red	Bold, vibrant accents

---

🔌 API Compatibility

Ollama

Communicates with Ollama's native REST API:

• GET /api/tags — List available models
• POST /api/chat — Send chat messages
• POST /api/generate — Stop/unload models

External APIs

Compatible with any service exposing an OpenAI-style endpoint:

• POST /chat/completions

Supports optional reasoning_effort parameter with automatic fallback for APIs that don't support it.

---

🧰 Tech Stack

Technology	Purpose
React 19	UI framework
TypeScript	Type safety
Vite 8	Build tool & dev server
react-markdown	Markdown rendering
remark-gfm	GitHub-flavored markdown
react-icons	Icon library
Inter	Typography

---

📜 License

This project is open source and available under the MIT License.