AI Application Integration
Stream, cancel, and recover AI responses in accessible UIs.
Stream a response to the client, let the user stop or replace it, and keep the interface accessible and consistent through reconnects and partial failures.
3 questions
Questions
Easy
1.5 h
Explain how a streaming feedback UI shows partial output, what Stop really cancels, and how run IDs keep late events from an old attempt out of a new answer.
Medium
3 h
Implement a pure reducer that keeps a streamed answer consistent through stale runs, replays, gaps, and stops, and predict its transitions. Then review a fetch integration for decoding, framing, cancellation, and end-of-stream defects.
Hard
4 h
Design a streaming interview-practice chat that keeps one answer correct across reconnects, several open tabs, and cancellation races, checks citations against current access, and never repeats its booking tool during recovery.
What you will be able to do
- Separate what the browser controls from what the backend must enforce for a model-backed feature
- Explain why a transport chunk is not a token or an event, and why a closed stream does not prove a completed answer
- Describe what Stop cancels on the client and on the server, and what it cannot undo
- Use run IDs to keep late events from an old attempt out of a new answer
- Label partial, interrupted, and completed output honestly and announce state changes accessibly
- Define a streaming event contract with run identity, one-based sequence numbers, and explicit terminal events
- Implement a pure reducer that ignores stale, duplicate, and late actions and marks gaps as interrupted
- Decode bytes and frame events correctly when characters and frames span network reads
- Connect the reducer to fetch with a per-run AbortController and handlers that update only their own run
Hands-on exercises
Interview rounds that use this topic
Topic boundaries
This topic covers client and server streaming state, cancellation, reconnects, citations, and accessible UI. Model Serving & Inference covers runtime scheduling, memory, and hardware.
Related on CodeSnatch
System Design
Compares polling, SSE, and WebSockets, including SSE reconnection with Last-Event-ID, for picking a response transport.
Code snippet
AbortController patterns that a Stop button relies on, with AbortError kept apart from real failures.
Code snippet
Per-request cleanup and a generation counter that drops stale responses, the same idea as run IDs.
System Design
A chat case study with client message IDs, at-least-once delivery with dedupe, and catch-up after reconnects.
System Design
Immutable event logs, snapshots, and replay of later events, the basis for a stream a client can resume.
AI Engineering
Separates an answer the model cut short from one the stream or UI lost, using termination evidence.
Community snippet
A hand-written SSE parser that buffers across chunks and resumes from Last-Event-ID with bounded backoff.
Community article
A per-change accessibility routine covering keyboard paths, live regions, and a screen reader smoke test.
System Design
Delivery guarantees, consumer offsets, and idempotent consumers, useful when reasoning about replayed events.
AI Engineering
Logical operation IDs and stored results that keep an agent's side effects from repeating across retries and crashes.