Open WebUI

# MISSION: Scaffold "Open WebUI" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Open WebUI**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Open WebUI
- **What It Does**: Open WebUI is a self-hosted, offline-capable AI interface with a SvelteKit frontend and a Python FastAPI backend that connects to Ollama, OpenAI-compatible APIs, and Anthropic and Google models.
- **Domain & Category**: Self-Hosted AI Interface & Agent Hub
- **Production Scale**: 2-5 people
- **Development Mode**: AI-AGENT
- **Architectural Rationale**: A SvelteKit-plus-FastAPI split lets one Docker image serve the UI and API together, while SQLAlchemy over SQLite or PostgreSQL and a swappable vector-store layer let self-hosters scale from a laptop to a multi-worker Redis-backed deployment without changing code.
- **Live Website Reference**: https://openwebui.com
- **Source Repository**: https://github.com/open-webui/open-webui
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: Python, Svelte, SvelteKit, TypeScript, FastAPI, SQLAlchemy, SQLite, PostgreSQL, Redis, Chroma, Vite, Tailwind CSS, LangChain, Socket.IO, Docker, Ollama
- **Primary Language(s)**: Python, Svelte, JavaScript
- **License of the reference repo**: NOASSERTION
- **Frontend**: SvelteKit — Builds the chat UI, admin dashboards, and PWA shell; adapter-node and adapter-static both ship in devDependencies.; Svelte — Component framework for the whole client; largest non-Python language in the repo by bytes.; Vite — Dev server and production bundler invoked by npm run dev/build before the SvelteKit adapter runs.; Tailwind CSS — Utility CSS for the app, configured with the container-queries and typography plugins.; Socket.IO — socket.io-client drives live chat streaming and presence in the browser.
- **Backend & APIs**: Python — Largest language in the repo; hosts the FastAPI app under backend/open_webui.; FastAPI — Serves the REST and WebSocket API consumed by the SvelteKit frontend.; python-socketio — Implements the realtime channel/notes/collaboration transport on the backend side of Socket.IO.; LangChain — Splits and chunks documents for the local RAG pipeline (langchain-community, langchain-text-splitters).; APScheduler — Runs scheduled prompts and calendar automations described in the README.
- **Data & persistence**: SQLAlchemy — Async ORM layer with Alembic migrations backing both supported databases.; SQLite — Default embedded database via aiosqlite; no external server required out of the box.; PostgreSQL — Optional production database via psycopg; pgvector extra enables it as a vector store too.; Redis — Backs sessions (starsessions[redis]) and horizontal-scale WebSocket state per the README.; Chroma — Default vector database for RAG; Qdrant, Milvus, Pinecone, OpenSearch, Elasticsearch and pgvector are optional extras.
- **Infrastructure & deploy**: Docker — Multi-stage build compiles the SvelteKit frontend then copies it into a Python 3.11 runtime image published to ghcr.io.; GitHub Actions — Separate backend.yaml, frontend.yaml, docker.yaml and release-pypi.yml workflows build, test and publish images and the PyPI package.; Ollama — Bundled as a companion service in docker-compose.yaml, with dedicated Dockerfile build args (USE_OLLAMA) to bake it into the image.
- **Tooling, testing & ops**: Model Context Protocol — The mcp Python SDK lets Open WebUI act as an MCP client for external tool servers.; OpenAI API — openai, anthropic and google-genai SDKs are pinned dependencies for provider-agnostic model access.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/open-webui/open-webui @ 0a7c158)
1. **One Docker image bundles the built frontend and the Python backend**: The Dockerfile builds the SvelteKit app in a node:22-alpine stage, then copies the compiled /app/build output and CHANGELOG.md into a python:3.11-slim-bookworm runtime stage that also installs backend/requirements.txt, so a single ghcr.io/open-webui/open-webui image serves both.
2. **SQLite by default, PostgreSQL for scale, same SQLAlchemy models**: pyproject.toml pins sqlalchemy[asyncio] and aiosqlite unconditionally, then adds psycopg[binary] and pgvector as an optional "postgres" extra plus alembic for migrations, so operators pick a database without changing application code.
3. **Nine vector databases sit behind one RAG interface**: chromadb is a base dependency while qdrant-client, pymilvus, pinecone, opensearch-py, elasticsearch, weaviate-client and the pgvector extra are optional installs listed in pyproject.toml, letting self-hosters swap the RAG backend to match existing infrastructure.
4. **Realtime transport is python-socketio plus Redis, not raw WebSockets**: The backend depends on python-socketio and redis/hiredis while the frontend depends on socket.io-client, and starsessions[redis] is used for session storage so chat streaming and multi-worker deployments share state through Redis instead of in-process memory.
5. **LLM provider access goes through official vendor SDKs, not a single abstraction**: backend/requirements.txt pins openai, anthropic and google-genai directly alongside langchain/langchain-community for document processing, keeping provider-specific features available instead of hiding them behind one wrapper.
6. **In-browser Python execution ships via Pyodide, not a server sandbox**: package.json depends on pyodide and runs scripts/prepare-pyodide.js as a pretest/predev/prebuild step, and RestrictedPython is a separate backend dependency for server-side execution, splitting client-side and server-side code execution paths.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Vite 6 with TanStack Router for fully type-safe routing. Manage server state and caching via TanStack Query v5 with optimistic UI updates.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (SQLAlchemy, SQLite, PostgreSQL, Redis, Chroma): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.