Openai·Software Engineer·Onsite - System Design / Architecture·Senior

SeniorPrefer not to say

Jul 2026

Summary

System design round at OpenAI for a full-stack role. The question was a single sprawling prompt about building a ChatGPT-style product, and they really did want you to go deep on the frontend state stuff, not just wave at 'we use WebSockets and call it a day.'

Questions Asked (1)

Design a ChatGPT-like conversational AI product end to end, focusing on the frontend and conversation lifecycle. How does a new conversation get created, how is the sidebar title updated once the LLM has enough context, how do you handle streaming tokens to the browser, and how do you manage scroll behavior when the user is reading history while new messages are arriving?

System DesignAPI & IntegrationsTechnical Trade-offs

Author's notes

This is basically four questions duct-taped into one.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by outlining the end-to-end architecture, then dive into each sub-problem (conversation creation, title generation, streaming, scroll management) with concrete technical choices and trade-offs. Emphasize the frontend state management and real-time communication patterns, and how they interact with backend services.

Pro tip: Demonstrate awareness of edge cases like network interruptions, race conditions between title generation and user edits, and accessibility in scroll behavior. Also, mention how you would instrument and monitor these flows to ensure reliability at scale.

1. High-Level Architecture

Sketch the main components: frontend (React/Next.js), backend API (Node.js/Go), LLM service, and real-time transport (WebSocket/SSE). Explain how they interact for a chat session.

2. Conversation Creation & Title Generation

Describe how a new conversation is initiated (e.g., user clicks 'New Chat'), how the initial message is sent, and how the sidebar title is generated asynchronously after enough context is available (e.g., after first LLM response).

3. Streaming Tokens to the Browser

Detail the streaming mechanism: use Server-Sent Events (SSE) or WebSockets to push tokens from backend to frontend. Explain how the frontend incrementally renders tokens and handles errors/reconnections.

4. Scroll Behavior Management

Explain how to detect if the user is at the bottom of the chat. If so, auto-scroll to show new messages; if not, show a 'new messages' indicator and preserve scroll position. Use Intersection Observer or scroll events.

5. Trade-offs & Edge Cases

Discuss trade-offs: SSE vs WebSockets, optimistic UI vs waiting for server confirmation, title generation timing, and handling race conditions (e.g., user edits title while auto-generation is in progress).

Key Points to Mention

Use of Server-Sent Events (SSE) for unidirectional streaming, with fallback to long-polling if needed.
Optimistic UI updates for user messages and streaming assistant responses.
Debouncing or throttling title generation to avoid excessive API calls, and using a separate lightweight LLM call for summarization.
Scroll anchoring techniques: CSS overflow-anchor or manual scroll position management.
State management: Redux/Zustand for conversation state, and React Query for server state.
Error handling: retry logic for streaming, graceful degradation, and user feedback for failures.

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.