React & GenAI
React renders AI chat UIs and consumes streamed model output through a backend AI API.
Prerequisites
Overview
React doesn't call a model provider directly — it renders UI state that updates as a backend streams tokens in. The interesting engineering is in managing that state: partial text arriving incrementally, tool-call indicators, and the ability to cancel a response mid-stream.
Where It Fits
User Input
Typed into a React form.
React UI
ClientBackend API
Model / Gateway
Streamed Tokens
Rendered incrementally.
Incremental Re-render
React updates as chunks arrive.
Key Points
- Streaming state
- A message accumulates token-by-token, so the UI re-renders on every chunk rather than waiting for a full response.
- Cancellation
- A user should be able to stop generation mid-stream — this closes the underlying connection, not just hides the UI.
- Optimistic UI
- The user’s own message typically renders immediately, before the model has responded at all.
Interview Question
How would you handle a user cancelling an AI response while it’s still streaming?
The cancel action needs to abort the underlying request (e.g. an AbortController) so the backend stops consuming provider output, not just stop updating the UI — otherwise the stream keeps running and billing keeps accruing after the user has moved on.
Explain It in 30 Seconds
React doesn’t talk to a model provider directly — it renders UI state driven by a backend that streams tokens in. The real engineering is managing incremental updates, tool-call indicators, and clean cancellation of an in-flight generation.
Real-World Stack
Technologies commonly used to implement this in production.