# Chat UI | Open Source Codebase Powering The HuggingChat App

**URL:** <https://onehack.st/t/chat-ui-open-source-codebase-powering-the-huggingchat-app/296659>\
**Category:** Tools & Scripts\
**Tags:** tools, programming, ai\
**Created:** [November 30, 2024, 7:51pm UTC](https://onehack.st/t/chat-ui-open-source-codebase-powering-the-huggingchat-app/296659 "2024-11-30T19:51:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![BlueHacker](https://onehack.st/user_avatar/onehack.st/bluehacker/32/174721_2.png) [@BlueHacker](https://onehack.st/u/BlueHacker)\
**Post date:** [November 30, 2024, 7:51pm UTC](https://onehack.st/t/chat-ui-open-source-codebase-powering-the-huggingchat-app/296659/1 "2024-11-30T19:51:53Z")

</div>

# Chat UI

**Find the docs at [hf.co/docs/chat-ui](https://huggingface.co/docs/chat-ui/index).**

[![Chat UI repository thumbnail](https://camo.githubusercontent.com/5ca252349f627055d5a42b914fc92a0f10ad41febadf2a106957cf9a33865868/68747470733a2f2f68756767696e67666163652e636f2f64617461736574732f68756767696e67666163652f646f63756d656e746174696f6e2d696d616765732f7265736f6c76652f6d61696e2f6368617475692d7765627365617263682e706e67)](https://camo.githubusercontent.com/5ca252349f627055d5a42b914fc92a0f10ad41febadf2a106957cf9a33865868/68747470733a2f2f68756767696e67666163652e636f2f64617461736574732f68756767696e67666163652f646f63756d656e746174696f6e2d696d616765732f7265736f6c76652f6d61696e2f6368617475692d7765627365617263682e706e67)

A chat interface using open source models, eg OpenAssistant or Llama. It is a SvelteKit app and it powers the [HuggingChat app on hf.co/chat](https://huggingface.co/chat).

1. [Quickstart](https://github.com/huggingface/chat-ui#quickstart)
2. [No Setup Deploy](https://github.com/huggingface/chat-ui#no-setup-deploy)
3. [Setup](https://github.com/huggingface/chat-ui#setup)
4. [Launch](https://github.com/huggingface/chat-ui#launch)
5. [Web Search](https://github.com/huggingface/chat-ui#web-search)
6. [Text Embedding Models](https://github.com/huggingface/chat-ui#text-embedding-models)
7. [Extra parameters](https://github.com/huggingface/chat-ui#extra-parameters)
8. [Common issues](https://github.com/huggingface/chat-ui#common-issues)
9. [Deploying to a HF Space](https://github.com/huggingface/chat-ui#deploying-to-a-hf-space)
10. [Building](https://github.com/huggingface/chat-ui#building)

## Quickstart

### Docker image

You can deploy a chat-ui instance in a single command using the docker image. Get your huggingface token from [here](https://huggingface.co/settings/tokens).

`docker run -p 3000 -e HF_TOKEN=hf_*** -v db:/data ghcr.io/huggingface/chat-ui-db:latest`

Take a look at the [`.env` file](https://github.com/huggingface/chat-ui/blob/main/.env) and the readme to see all the environment variables that you can set. We have endpoint support for all OpenAI API compatible local services as well as many other providers like Anthropic, Cloudflare, Google Vertex AI, etc.

### Local setup

You can quickly start a locally running chat-ui & LLM text-generation server thanks to chat-ui’s [llama.cpp server support](https://huggingface.co/docs/chat-ui/configuration/models/providers/llamacpp).

**Step 1 (Start llama.cpp server):**

Install llama.cpp w/ brew (for Mac):

`# install llama.cpp brew install llama.cpp`

or [build directly from the source](https://github.com/ggerganov/llama.cpp/blob/master/docs/build.md) for your target device:

```auto
git clone https://github.com/ggerganov/llama.cpp && cd llama.cpp && make

```

Next, start the server with the [LLM of your choice](https://huggingface.co/models?library=gguf):

```auto
# start llama.cpp server (using hf.co/microsoft/Phi-3-mini-4k-instruct-gguf as an example)
llama-server --hf-repo microsoft/Phi-3-mini-4k-instruct-gguf --hf-file Phi-3-mini-4k-instruct-q4.gguf -c 4096

```

A local LLaMA.cpp HTTP Server will start on `http://localhost:8080`. Read more [here](https://huggingface.co/docs/chat-ui/configuration/models/providers/llamacpp).

**Step 3 (make sure you have MongoDb running locally):**

`docker run -d -p 27017:27017 --name mongo-chatui mongo:latest`

Read more [here](https://github.com/huggingface/chat-ui#database).

**Step 4 (clone chat-ui):**

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

**Step 5 (tell chat-ui to use local llama.cpp server):**

Add the following to your `.env.local`:

```auto
MODELS=`[
  {
    "name": "microsoft/Phi-3-mini-4k-instruct",
    "endpoints": [{
      "type" : "llamacpp",
      "baseURL": "http://localhost:8080"
    }],
  },
]`

```

Read more [here](https://huggingface.co/docs/chat-ui/configuration/models/providers/llamacpp).

**Step 6 (start chat-ui):**

`npm install npm run dev -- --open`

Read more [here](https://github.com/huggingface/chat-ui#launch).

## GitHub:

[https://github.com/huggingface/chat-ui](https://github.com/huggingface/chat-ui)