Practice/OpenAI/AI Chatbot System

AI Chatbot System

System DesignMust Full-stack Software Engineer

Problem Statement

Design a simple AI chatbot system similar to ChatGPT's main interface. The system should allow users to interact with an AI assistant through a web-based chat interface.

Core Requirements User Authentication: Users must be able to authenticate before accessing the chatbot Message Exchange: Users should be able to send messages and receive responses from the AI Streaming Responses: AI responses should be displayed in real-time as tokens stream in (not all at once) Session Management: Conversations are ephemeral - when users refresh the page, a new conversation begins with no data persistence Key Constraints No Backend Storage: User messages and conversation history should NOT be stored in a database Client-Side Storage: All conversation data should be stored in the browser Frontend Focus: The design should emphasize full-stack considerations, particularly frontend architecture

Follow-up Questions

During the interview, you may be asked to discuss:

Streaming Technology Choice: Compare and contrast different streaming technologies (Server-Sent Events vs WebSockets) for delivering AI responses API Integration: How to integrate with Chat Completion APIs effectively Credential Management: Details about handling user authentication and credentials securely State Management: How to manage conversation state in the browser Error Handling: How to handle network failures, API timeouts, and streaming interruptions Solution Resources

This problem has well-documented solutions available online. We recommend reviewing these comprehensive guides:

Design ChatGPT System Design School - ChatGPT Solution System Design Handbook - OpenAI Interview Guide

Note: These resources provide detailed architectural approaches. During your interview, you should develop and articulate your own solution based on your understanding of the requirements and trade-offs.

Interview Experience & Insights Interview Format Duration: 60 minutes Role Type: This question is commonly asked for Full-stack Engineer positions Interviewer Background: The interviewer may have a frontend engineering background, which influences the focus areas What Interviewers Look For

Based on real interview experiences, interviewers typically emphasize:

Frontend Architecture: Since this is a full-stack problem with frontend emphasis, expect deep dives into:

How you structure the client-side application State management patterns for chat interfaces Efficient rendering of streaming content

Streaming Implementation: Strong understanding of:

Server-Sent Events (SSE) vs WebSockets trade-offs When to use each technology How to handle backpressure and connection issues

API Design: Clear thinking about:

How the frontend communicates with the Chat Completion API Request/response patterns for streaming Error handling and retry logic

Authentication Flow: Detailed discussion of:

User credential management Token-based authentication Session handling without server-side persistence

Browser Storage: Practical approaches to:

Storing conversation history locally Managing storage limits Clearing data on refresh