Design a ChatGPT-like web chat UI
Company: OpenAI
Role: Software Engineer
Category: System Design
Difficulty: hard
Interview Round: Technical Screen
## Scenario
You are interviewing for a **front-end** role. Design a web application similar to a ChatGPT chat experience. The interviewer expects a **front-end–focused** system design, but you should also sketch the key **back-end** pieces at a high level.
## Functional requirements
- Users can:
- Start a new conversation and view a list of past conversations.
- Send a message (prompt) and receive an AI assistant reply.
- See the assistant response **stream in progressively** ("AI is typing" / token-by-token effect).
- Scroll through message history.
- Persistency:
- Conversations should be **persisted** so they remain after refresh/reopen.
- Address a follow-up: handling **storage persistency** tradeoffs (local-only vs server-backed, offline, multi-device).
## Non-functional requirements
- Responsive UI, accessible, and handles long conversations.
- Resilient to network failures (reconnect, retry, prevent duplicate sends).
- Reasonable performance for large histories (hundreds/thousands of messages).
## What to produce
1. A high-level architecture covering **front-end, API layer, and model/inference layer**.
2. A proposed **React component breakdown** and key client-side data structures/state.
3. The **data flow** from UI → server → AI model → streamed tokens → UI.
4. How you implement the streaming/typing effect.
5. Persistency approach and edge cases (refresh, multi-tab, conflicts, offline).
Quick Answer: This English summary evaluates a question that assesses front-end–focused system design competencies such as UI architecture, real-time streaming interactions, state management, persistence strategies, and integration with API and model/inference layers.