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

SeniorPrefer not to say

Apr 2026

Summary

System design round at OpenAI for a software engineer role, and this one was heavily front-end focused which I wasn't fully expecting. The question had a lot of moving parts and I think I handled some pieces well but definitely got lost in the weeds on a few constraints.

Questions Asked (1)

Design an AI chatbot system with a front-end focus where conversation history lives only in the browser, bot responses are streamed token by token, a page refresh wipes the session, and client-side auth must not expose provider secrets.

System DesignTechnical Trade-offsAPI & Integrations

Author's notes

This question is really like five questions stitched together and I underestimated that at first.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by clarifying requirements and constraints, then propose a high-level architecture that separates client-side state management from a secure backend proxy. Focus on the front-end flow: how messages are stored in browser memory, how streaming responses are consumed and rendered, and how authentication is handled without exposing secrets. Finally, discuss trade-offs and potential improvements.

Pro tip: Emphasize that the backend proxy is essential for security and that streaming requires careful handling of partial tokens and UI updates. Mention that using a server-sent events (SSE) or WebSocket approach can simplify streaming, but SSE is often sufficient for one-way token streams.

1. Clarify Requirements and Constraints

Ask questions to confirm assumptions: Is the chatbot for a single user or multiple? What authentication method is used? Are there any latency or scalability concerns? Confirm that conversation history is ephemeral and client-side only.

2. Design Client-Side Architecture

Outline how the front-end manages state: use in-memory storage (e.g., React state, Vue reactive objects) for conversation history, ensuring it's wiped on refresh. Describe the UI components: message list, input box, and streaming indicator.

3. Implement Secure Backend Proxy

Explain that the client never holds API keys; instead, it authenticates with your backend (e.g., via session cookies or short-lived tokens). The backend proxies requests to the AI provider, injecting secrets server-side.

4. Handle Streaming Responses

Detail how the client initiates a request and consumes a stream (e.g., using Fetch API with ReadableStream or EventSource). Describe how to parse chunks and update the UI incrementally, handling errors and completion.

5. Discuss Trade-offs and Improvements

Address limitations: no persistence means users lose history on refresh; consider optional sessionStorage for tab persistence. Discuss scalability, rate limiting, and potential for WebSockets for bidirectional streaming.

Key Points to Mention

Client-side state management (e.g., React useState/useReducer) for ephemeral conversation history.
Secure authentication flow: backend proxy with session tokens or OAuth, never exposing API keys to the client.
Streaming implementation: using Fetch with ReadableStream or EventSource to handle token-by-token responses.
UI/UX considerations: optimistic updates, typing indicators, error handling for stream interruptions.
Trade-offs: no persistence vs. simplicity; potential use of sessionStorage for tab-specific persistence.
Security best practices: CORS, CSRF protection, and rate limiting on the backend proxy.

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