Building a React AI chat UI: handling awkward states with shadcn components

A developer behind Cuelark argues that React AI chat interfaces should be designed around their edge-case behavior, such as double-submits, cancelled responses, and accidental file attachments, rather than visual polish. The Cuelark Message and Prompt Input components are presented as adaptable UI source code, not as a backend that handles models, API keys, or data privacy. The article recommends storing conversation turns as data with stable IDs and a defined state (pending, complete, failed, or cancelled). It advises updating a single assistant turn while streaming rather than appending a message per chunk. It also suggests plain-text rendering by default, since model output should be treated as untrusted input.