local-ai-chat-frontend

Overview

A privacy-first, browser-based chat interface for local LLMs (Ollama, GPT4ALL, LM Studio, llama.cpp) and cloud providers. No backend required.

Issues & Reasons

Local LLM providers lack easy-to-deploy, cross-platform GUIs. local-ai-chat-frontend runs in any browser (Win/macOS/Linux/Android/iOS/iPadOS), connecting instantly to your local network providers.

Features

Core Functionality

• Multi-provider support — Works with OpenAI, LM Studio, GPT4ALL, and Ollama. Point it at any OpenAI-compatible endpoint you have running.
• Dynamic model selection — Available models are fetched from the server when you select a provider. No manual configuration needed.
• Reasoning model support — For advanced reasoning models (o1, GPT-OSS, DeepSeek-R1), configure reasoning depth (low/medium/high). The app automatically detects reasoning-capable models.
• System prompts per model — System prompts are saved separately for each provider-model combination. Switch between models and your custom prompts are automatically restored.

Chat Management

• Chat history — All conversations are stored in IndexedDB and persist across sessions. Browse past chats from the sidebar.
• Sidebar navigation — Desktop users see a persistent sidebar; mobile users access it via hamburger menu.
• Delete with confirmation — Remove unwanted chats with a confirmation modal to prevent accidental deletion.
• Message copy — Copy any message to clipboard with one click. Visual feedback confirms the action.

User Experience

• Client-side storage — Settings and API keys are kept in this browser's IndexedDB (not encrypted). A key is sent only to the endpoint of its own provider; you can turn off sending it per provider, or turn off saving keys entirely on shared devices.
• Markdown rendering — AI responses are rendered as Markdown via marked, sanitized with DOMPurify before display, supporting code blocks, lists, and formatting.
• Performance metrics — See tokens per second and timestamp for each AI response.
• Conversation minimap — A compact minimap beside the scrollbar shows all messages color-coded by sender. Click any block to jump to that message instantly.

Internationalization & Accessibility

• i18n (Japanese / English) — The UI supports Japanese and English; language preference is persisted in IndexedDB and auto-detected from the browser on first visit.
• Dark mode — Toggle between light and dark themes via the nav bar; preference is persisted in IndexedDB across sessions.
• Responsive design — Optimized layouts for mobile (hamburger menu) and desktop (persistent sidebar).

Deployment

• npx one-liner — Run instantly from GitHub without cloning: npx local-ai-chat-frontend.
• Docker-ready — Production image serves the static build via nginx; a dev compose file is included for local development.

Tech Stack

| Layer | Technology | |---|---| | UI Framework | React 19 | | Language | TypeScript (strict) | | Bundler | Vite 7 | | Styling | Tailwind CSS 4 | | Markdown | marked + DOMPurify (sanitization) | | Storage | IndexedDB (native) | | i18n | i18next / react-i18next | | Server | Node http + sirv (with security headers) / nginx (Docker) |

Key Technologies

• State Management: React hooks (useState, useEffect, useRef)
• Storage: IndexedDB for chat history and system prompts
• Routing: Single-page app with conditional rendering (no router)
• API Integration: OpenAI-compatible REST APIs with fetch
• Styling: Tailwind CSS with dark mode support

Quick Start

Run instantly (no install)

npx local-ai-chat-frontend

bunx does not reliably build devDependencies from a raw git ref, so npx is the recommended way to run this project directly from GitHub. If you use Bun, clone the repo and run bun install && bun run build && bun start instead.

Custom port / LAN access

PORT=8080 npx local-ai-chat-frontend
HOST=0.0.0.0 PORT=3000 npx local-ai-chat-frontend

Run with Docker

# Development
docker compose up

# Production build
docker build -t local-ai-chat-frontend .
docker run -p 80:80 local-ai-chat-frontend

Run with Podman

# Development
podman compose up

# Production build
podman build -t local-ai-chat-frontend .
podman run -p 80:80 local-ai-chat-frontend

Development

bun install
bun run dev

Configuration

Supported Providers

The application supports multiple LLM providers with automatic model discovery:

| Provider | Default Endpoint | Authentication | Reasoning Support | Notes | |----------|-----------------|----------------|-------------------|-------| | OpenAI | https://api.openai.com | API Key required | Yes (reasoning_effort) | Official OpenAI API | | Ollama | http://localhost:11434 | No auth | Yes (think) | Local models via Ollama | | GPT4ALL | http://localhost:4891 | No auth | No | Local OpenAI-compatible endpoint | | LM Studio | http://localhost:1234 | Optional | Yes (reasoning_effort) | Local OpenAI-compatible endpoint | | llama.cpp | http://localhost:8080 | No auth | Yes (reasoning_effort) | llama-server built-in HTTP server |

Provider-Specific Features

• OpenAI / LM Studio / llama.cpp: Supports reasoning_effort parameter (low/medium/high)
• Ollama: Supports think parameter for reasoning models like GPT-OSS and DeepSeek-R1
• llama.cpp: CORS enabled by default — no proxy or special configuration needed

CORS Configuration

GPT4ALL: GPT4ALL has no CORS support, so the app reaches it through the Vite dev proxy (bun run dev). The production server (npx / bun start) and the Docker image do not proxy GPT4ALL.

Ollama: Set environment variable before starting:

# Windows
set OLLAMA_ORIGINS=*
ollama serve

# Linux/Mac
OLLAMA_ORIGINS=* ollama serve

LM Studio: Enable CORS in Server Settings

Development

Build

bun run build

Type Check

bunx tsc -b

Project Structure

src/
├── components/
│   ├── Chat.tsx             # Chat view (send / stream loop)
│   ├── ChatSidebar.tsx      # Session history sidebar
│   ├── ConfirmModal.tsx     # Confirmation dialog
│   ├── Minimap.tsx          # Chat minimap
│   └── Settings.tsx         # Connection / model settings
├── lib/                     # Non-UI helpers (API calls, storage, rendering) + unit tests
├── locales/
│   ├── en.json              # English translations
│   └── ja.json              # Japanese translations
├── App.tsx                  # Root component
├── i18n.ts                  # i18n configuration
├── index.css                # Global styles
├── main.tsx                 # Entry point
└── vite-env.d.ts            # Vite type declarations

:handshake: Contributing

Contributions are welcome!
Please note that this project uses Takumi Guard in CI workflows to scan dependencies for malware and ensure supply chain security. This scanning only applies to CI and does not affect your local development environment.

:page_facing_up: License

This project is licensed under the MIT License. See the LICENSE file for details.