Chat UI: A SvelteKit Frontend for Any OpenAI-Compatible API

If you're building with language models, you’ve probably noticed that a lot of the UI work is repetitive. You want a chat interface that looks good, works fast, and connects to any API that speaks the OpenAI format. That’s where Chat UI comes in.

It’s an open-source, SvelteKit-powered chat interface from Hugging Face. It’s not tied to any specific model provider — you point it at an OpenAI-compatible endpoint, and you’ve got a fully functional chat app. Simple as that.

What It Does

Chat UI is exactly what it sounds like: a chat interface. You give it a URL to an API that follows the OpenAI chat completion format (like Hugging Face’s own Inference API, or a local model running via vLLM or TGI), and it renders a clean, responsive chat window.

Under the hood, it’s built with SvelteKit, TypeScript, and Tailwind CSS. It handles streaming responses, conversation history, and multiple concurrent sessions. It also supports user authentication, so you can use it as a real product — not just a demo.

Why It’s Cool

The best part is how deliberately un-opinionated it is. You don’t have to rewrite the UI every time you switch from GPT-4 to a local LLaMA. Change the API endpoint, and you’re done. The GitHub repo includes built-in support for Hugging Face Inference Endpoints, OpenAI, Anthropic, and Amazon Bedrock, but the “OpenAI-compatible” adapter means anything that speaks that format works.

It also handles streaming really well. SvelteKit’s server-side rendering and reactive stores make the streaming feel snappy and native — no janky polling or clunky WebSocket setups. The code is clean and well organized, so if you want to customize the UI, it’s easy to find the relevant component.

There’s also a Hugging Face Spaces version you can try instantly, and the repo includes a Dockerfile for self-hosting. For devs who want to brand or extend the interface, it’s a solid starting point.

How to Try It

You have a few options:

Quick demo – Try the live version on Hugging Face Spaces:
https://huggingface.co/spaces/huggingface/chat-ui

Self-host with Docker – Clone the repo and run:

git clone https://github.com/huggingface/chat-ui
cd chat-ui
cp .env.example .env
# Edit .env to set your API endpoint and key
docker compose up

Local dev – If you want to hack on it:

npm install
npm run dev

The default .env expects an OpenAI‑compatible endpoint, so for local models you’d set OPENAI_API_KEY and PUBLIC_OPENAI_ENDPOINT accordingly.

Final Thoughts

If you’ve spent time building a chat UI from scratch for a model API, you know how much boilerplate it involves. Chat UI handles the tricky parts — streaming, session management, responsiveness — and lets you focus on the actual model or product logic.

It’s also a nice example of what SvelteKit can do for real‑time apps. The codebase is small, well documented, and straightforward to extend. Whether you’re prototyping a new model, building a customer‑facing chat tool, or just want a clean frontend for your local LLM setup, this is worth a look.

Give it a spin, fork it, and drop the API key in. It’ll be running in five minutes.

*Found this project on @githubprojects