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

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/huggingface-chat-ui
Generated for open source discovery and AI-assisted research.

Chat UI is an open-source SvelteKit application that provides a flexible chat interface for Large Language Models (LLMs). It serves as the foundation for HuggingChat, enabling users to interact with various OpenAI-compatible APIs. This project offers extensive customization and deployment options, making it ideal for developers building their own AI chat experiences.

GitHub: https://github.com/huggingface/chat-ui
OSRepos URL: https://osrepos.com/repo/huggingface-chat-ui

## Summary

Chat UI is an open-source SvelteKit application that provides a flexible chat interface for Large Language Models (LLMs). It serves as the foundation for HuggingChat, enabling users to interact with various OpenAI-compatible APIs. This project offers extensive customization and deployment options, making it ideal for developers building their own AI chat experiences.

## Topics

- chatgpt
- huggingface
- llm
- svelte
- sveltekit
- typescript
- ai
- open-source

## Repository Information

Last analyzed by OSRepos: Wed Feb 25 2026 01:12:45 GMT+0000 (Western European Standard Time)
Detail views: 8
GitHub clicks: 5

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## 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:

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

env
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.**

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

## Links

*   **GitHub Repository:** [https://github.com/huggingface/chat-ui](https://github.com/huggingface/chat-ui){:target="_blank"}
*   **HuggingChat Application:** [https://huggingface.co/chat](https://huggingface.co/chat){:target="_blank"}