Katkat
Back

Design the Frontend for an AI Chat Application

WaymoFrontend Engineer · Onsite
MediumFrontend EngineerOnsiteSystem Design

Last updated

This question tests the ability to design a performant and resilient frontend architecture for a real-time, state-heavy AI chat interface capable of handling large message trees and network instability.

Problem Statement

Design the frontend architecture for an AI chat application where users engage in complex, branching conversational threads. The interface must support streaming responses, long-running sessions, and complex interaction models.

Functional Requirements

  • Branching History: Users can edit previous prompts, creating new "branches" of conversation that persist alongside the main thread.
  • Real-time Updates: Support streaming message tokens via WebSockets or Server-Sent Events (SSE).
  • Draft Persistence: Users can navigate away from a thread and return to find their partially typed inputs preserved.
  • Large State Management: The chat history can grow to thousands of nodes; ensure the UI remains performant.

Non-Functional Requirements

  • Optimistic UI & Retries: The app must remain responsive even during unstable network conditions.
  • Data Integrity: Implement robust deduplication of streaming chunks and ensure sequence consistency.
  • Accessibility: Ensure live updates (new tokens/messages) are announced correctly to screen readers without excessive noise.

Deliverables

  1. Data Model: How would you store the conversational structure to allow for efficient branching and tree traversal?
  2. Architecture: Describe the state management strategy for handling large datasets and streaming updates.
  3. Resilience: Explain your approach to connection interruptions, automatic reconnection, and handling message state recovery from the server.
  4. Performance: Discuss how you would implement virtualization for long chat threads to minimize DOM nodes.

Hints

Hint 1

Consider representing the conversation as a normalized graph or a tree of nodes rather than a simple flat array of objects.

Hint 2

Think about using a state management layer that separates the raw network stream buffer from the final rendered message components.

Hint 3

For virtualization, look into anchor-based list scrolling to maintain scroll position when prepending messages or loading historical data.

Follow-up questions

  • How would you handle security and XSS prevention when rendering untrusted AI-generated Markdown/HTML content?
  • If the server sends a partial update for a message that was already rendered, what is your strategy for efficient reconciliation?
  • How would you integrate client-side rate limiting or "stop generating" signals to manage expensive backend AI tokens?