Skip to content

Design a ChatGPT-style chat (frontend)

Design the web client for an AI chat: someone sends a message and the reply appears word by word, and they can stop it, retry it and come back to old conversations.

System designFrontend and full stackAI systemsMid-levelSenior

What to work through

Work through a ChatGPT-style chat as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Send a message and see the reply appear word by word
  • Stop a reply while it is still arriving
  • Retry a reply that failed or was stopped
  • Come back to past conversations from a list
  • Show formatted replies with lists and code blocks

Constraints to discuss

  • The first words of a reply show within 1 to 2 seconds
  • Typing and scrolling answer within 200 milliseconds while a reply streams
  • Model output is treated as untrusted text before it is drawn
  • Usable with a keyboard, with new replies announced to screen readers
Need a starting point?

Watch for these common gaps as you prepare:

  • Re-formatting the whole reply on every new piece of text
  • Sanitising each piece on its own instead of all the text so far
  • A stop button that closes the connection while the server keeps generating
  • No end state for a stream that just stops, so the reply spins forever
  • Spending the round on server scale when the interviewer ruled it out
  • Showing the server's raw error to the person instead of a short message and a retry
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)Messaging and notificationsDesign a chat app (frontend)CollaborationDesign a collaborative document editor (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.