Build ChatGPT – Frontend System Design Guide
We’ll walk through the frontend system design for building a ChatGPT-style web application. Our goal is to design an interface that lets users enter prompts, stream responses word by word, maintains a conversation history, and optionally supports model switching (for example, toggling between GPT-3.5 and GPT-4). We’ll focus on building a frontend that’s fast, scalable, and production-ready, capable of serving millions of users with smooth, real-time experiences. You’ll see estimates for scale, functional requirements, and the key non-functional criteria that make for a robust, user-friendly AI chat app.
Requirements
- Prompt input: User enters a prompt.
- Streaming response: Chat response streams words word by word, similar to ChatGPT.
- Conversation history: Threads of past chats per user.
- Model switching (optional): Choose between GPT-3.5, GPT-4, etc.
Scalability Estimates
| Metric | Estimate | Calculation | Notes |
|---|---|---|---|
| Daily Active Users (DAUs) | 10M | 10 million users per day | |
| Conversations per User | 5 | 10M x 5 = 50M conversations/day | |
| Messages per Conversation | 4 | 50M x 4 =... premium content. Premium Keep reading with PremiumGet the rest of this guide plus every premium question, solution, and system design deep dive.
     4.9/5 from our users |