workflowstacks
design

Chat UI

The open source codebase powering HuggingChat
10,931 stars1,675 forksTypeScriptUpdated 9/4/2026100% free · open source
What it does

Runs the open‑source front‑end that powers HuggingChat, letting you host your own ChatGPT‑style UI backed by any Hugging Face model.

When to use it
  • •You want a ready‑made chat UI without building it from scratch.
  • •You need to brand the chat experience (logo, colors, custom prompt) for your product.
  • •You want to run a private instance that talks to your own Hugging Face models or an on‑premise inference server.
Ready-to-paste prompt
In the running UI, type a multi‑turn instruction like:

```
You are a product manager. Help me outline a go‑to‑market plan for a SaaS tool that automates invoice processing.
```
Heads up: The UI won’t work until you provide a valid Hugging Face API token (set in NEXT_PUBLIC_HF_TOKEN) and the token’s plan includes inference access; otherwise requests return 403 errors.
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/chat-ui && curl -fsSL https://workflowstacks.com/api/skills/chat-ui/claude-skill -o ~/.claude/skills/chat-ui/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Chat UI works
Codeflow
Free to inspect

Chat UI is a very large TypeScript project (~70k lines across 555 code files, plus 32 test files). It is a full software project: use it through its install path rather than reading it end to end. Last commit this month, Apache-2.0 license, has a test suite.

Size
Very large codebase
~70k lines · 555 code files · days to read — use, don't read
Setup
Developer setup
A real software project. Use it via its install path; don't expect to read it all.
Runs on
Node.js · Docker
No API keys detected
TypeScript 79%Svelte 19%JavaScript 1%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    CLAUDE.md
    The instructions the AI actually follows
  3. 3
    server.js
    Where the program starts running
  4. 4
    package.json
    Dependencies and the commands it exposes
  5. 5
    src/lib/migrations/routines/index.ts
    Inside src/ — the main logic begins here
What's in each folder
src/Core code — the actual logic573 files
docs/Documentation13 files
chart/Folder15 files
scripts/Helper scripts11 files
screenshots/Folder8 files
stub/Folder2 files
models/Data models & types1 files
static/Images & static assets41 files
READMEHas testsDocumentedCI checksDocker readyApache-2.0 licenseUpdated this month
Quick Actions
Details
Creator
huggingface
Language
TypeScript
Category
design
Published
2/17/2023

Are you the creator of this tool? Claim your listing → and earn 85% of every sale.

Related skills

More design tools founders pair with this one.

design★ 389,002
openclaw: Personal AI Assistant
Get a personal AI assistant for any OS and platform, ideal for founders seeking AI-driven support.
design★ 164,771
Stable Diffusion web UI for Design
Generate images with stable-diffusion-webui, a tool.
design★ 108,368
Supabase: Dedicated Postgres DB
Get a dedicated Postgres database with Supabase.
design★ 47,098
Summer2026-Internships: Find Top Talent
Get daily updated internship postings for software engineering and more.
design★ 39,133
Drawdb
Free, simple, and intuitive online database diagram editor and SQL generator.
design★ 22,019
Airbyte: Simplify Data Movement
Get seamless data integration for your startup with Airbyte.