Streaming AI Chat
A real-time AI chat interface: token-by-token streaming, requests you can stop, and retry when the socket drops.
Overview
At Casp AI I built the product's real-time chat interface in React and Tailwind on top of FastAPI services. Responses stream in token by token with optimistic state, an in-flight request can be stopped, and a dropped socket retries instead of losing the conversation. I refactored the legacy chat frontend into a modular component system (message bubbles, a streaming renderer, tool-call cards and the prompt input) and moved the team's build pipeline to Vite, taking CI builds from about 8 minutes to under 5.
Problem → built → result
- Problem
- A legacy chat frontend, and CI builds that took ~8 minutes.
- Built
- A streaming chat UI in modular components on FastAPI, and a move to Vite.
- Result
- CI ~8 min → under 5 · ~40% faster
What I built
- Real-time chat UI in React + Tailwind: token-by-token streaming with optimistic state, abortable in-flight requests and retry on socket drops
- Refactored the legacy chat frontend into a modular component system: message bubbles, streaming renderer, tool-call cards and prompt input
- Migrated the team's build pipeline to Vite, cutting CI builds from ~8 minutes to under 5 (~40% faster)
- Integrated the chat frontend with the FastAPI services behind it
Why it's shaped this way
Streaming changes what loading means: the UI renders a message that is still arriving, lets the user stop it, and recovers from a dropped connection without losing what's already on screen.