Chat UI: The Open Source Interface for LLMs, Powering HuggingChat

Introduction

Chat UI is an impressive open-source project by Hugging Face, serving as the foundational codebase for the popular HuggingChat application. Built with SvelteKit and TypeScript, it provides a highly customizable and extensible chat interface designed specifically for interacting with Large Language Models (LLMs). This project empowers developers to create their own AI chat experiences, offering seamless integration with various OpenAI-compatible APIs and robust features for managing chat history, users, and settings.

Installation

Getting Chat UI up and running locally is straightforward. The project is designed to connect with OpenAI-compatible APIs, making it flexible for various LLM providers.

Step 1: Clone the repository and set up your environment variables.

First, clone the repository and navigate into its directory:

git clone https://github.com/huggingface/chat-ui
cd chat-ui

Next, create a .env.local file in the root of the project. This file will hold your API endpoint and key. For quick setup, you can use Hugging Face Inference Providers router:

OPENAI_BASE_URL=https://router.huggingface.co/v1
OPENAI_API_KEY=hf_************************ # Replace with your Hugging Face access token

Step 2: Install dependencies and launch the development server.

npm install
npm run dev -- --open

This will start the development server, and Chat UI will be accessible in your browser, ready for you to start chatting.

Examples

Chat UI offers versatile integration options for various LLM providers and robust database solutions.

Connecting to Different LLM Providers:

The OPENAI_BASE_URL and OPENAI_API_KEY in your .env.local file can be configured to work with a range of OpenAI-compatible services:

Provider	Example `OPENAI_BASE_URL`	Example key env
Hugging Face Inference Providers router	`https://router.huggingface.co/v1`	`OPENAI_API_KEY=hf_xxx` (or `HF_TOKEN` legacy alias)
llama.cpp server	`http://127.0.0.1:8080/v1`	`OPENAI_API_KEY=sk-local-demo` (any string works; llama.cpp ignores it)
Ollama	`http://127.0.0.1:11434/v1`	`OPENAI_API_KEY=ollama`
OpenRouter	`https://openrouter.ai/api/v1`	`OPENAI_API_KEY=sk-or-v1-...`
Poe	`https://api.poe.com/v1`	`OPENAI_API_KEY=pk_...`

Database Options:

For chat history, user data, and settings, Chat UI uses MongoDB. For local development, it can fall back to an embedded MongoDB. For production or team environments, you can configure it with:

MongoDB Atlas (managed): Set MONGODB_URL to your Atlas connection string.
Local MongoDB (container): Run docker run -d -p 27017:27017 --name mongo-chatui mongo:latest and set MONGODB_URL=mongodb://localhost:27017.

Advanced Features:

Chat UI also supports advanced configurations like:

Theming: Customize the app's name, assets, and data sharing options using environment variables.
LLM Router: Implement server-side smart routing for LLMs using models like katanemo/Arch-Router-1.5B, allowing the UI to select the best model for each message.
MCP Tools (Model Context Protocol): Integrate external tools and services, enabling models to perform actions like web searches and feed results back into the conversation using OpenAI function calling.

Why Use Chat UI?

Chat UI stands out as a robust and flexible solution for anyone looking to build or customize an AI chat application. Its key advantages include:

Open Source and Community-Driven: Being open source, it benefits from community contributions and offers full transparency and control.
Proven Reliability: It powers HuggingChat, demonstrating its stability and capability in a real-world, high-traffic environment.
Broad LLM Compatibility: Its support for OpenAI-compatible APIs means you can easily integrate with a wide array of LLM providers, from commercial services to local models.
Developer-Friendly: Built with SvelteKit and TypeScript, it offers a modern development experience, with clear installation steps and comprehensive documentation.
Rich Feature Set: From basic chat functionality to advanced LLM routing, tool integration, and theming, Chat UI provides a comprehensive toolkit for sophisticated AI chat applications.