How do you show a streamed result and the agent's progress?
Answer out loud or in your head first, then compare.
Answer
I don't store just one growing string. I distinguish answer text, tool use, waiting for approval, error and completion. Every run has an ID, so the result of a previous conversation doesn't get appended to a new one.
Example: first I see “searching documents”, then the sources and the answer. After clicking stop, the app should know whether we're stopping just the receiving of data, or the whole task. That isn't always the same outcome. Also, I don't update a heavy view after every tiny fragment if it causes stutter. For a screen reader it's better to group announcements than to announce each token separately.
Why it matters: Shows how to combine the protocol, React state and user comfort.
Possible follow-ups: How do you show an error after part of the answer has been sent? What about after reconnecting?
How did it go? Be honest — “Not yet” puts the question on your review list.
Start with
- C-P01 · What is React, and what is a component? — React, Next.js and frontend
- C-P02 · How do props and state differ? — React, Next.js and frontend
- C-P04 · What is useEffect for, and what does the dependency array mean? — React, Next.js and frontend
Practise in code
- Reading SSE events — runs tests in your browser
Further reading
- Node.js: Backpressuring in Streams(opens in a new tab)Docs; accessed 22.10.2026. Flow, drain and limiting memory use.