What this prompt does
This prompt builds a ChatGPT-style streaming chat interface for [platform] using [model_provider], covering both frontend and backend. It specifies real-time token streaming over SSE or WebSockets, a typing indicator with stream cancellation (stop generating), message history persisted with [history_storage], and Markdown rendering with syntax-highlighted code blocks via [highlight_lib].
The structure works because streaming UX feels simple until you handle the hard edges. Stop-generation, file upload for [supported_files], conversation management (new, rename, delete, search), a model and parameter selector, and a mobile-responsive layout in [ui_framework] are all defined. The error-state step — handling rate limits, network errors, and model errors with retry UI — is where most of the real work lives, because clean cancellation and failure recovery are what make streaming feel polished.
The rendering and history layers are what make the interface feel finished. Markdown with syntax-highlighted code blocks via [highlight_lib] and per-block copy buttons turn raw model output into something developers can actually use, while [history_storage] keeps past conversations searchable and renamable. Keyboard shortcuts — Enter to send, Shift+Enter for a newline, a shortcut for a new chat — are small touches, but they are exactly what makes a chat UI feel fast to power users rather than clunky.
When to use it
- You are building a chat product on
[platform]and want token-by-token streaming, not a spinner then a wall of text. - You need stop-generation so users can cancel a long response mid-stream.
- You want Markdown rendering with syntax-highlighted, copyable code blocks.
- You need conversation management: new chat, rename, delete, and history search.
- You want file upload for
[supported_files]as conversation context. - You need robust error states with retry UI for rate limits and network failures.
Example output
Expect a full streaming chat app: a [backend_framework] backend streaming tokens over SSE or WebSockets, a [ui_framework] frontend with a typing indicator and stop button, Markdown rendering via [highlight_lib] with copy-code buttons, [history_storage] persistence, a model and parameter selector, file upload, keyboard shortcuts, and error states with retry. It usually covers the responsive layout and cancellation handling end to end.
Pro tips
- Choose SSE over WebSockets unless you need bidirectional streaming; SSE is simpler for one-way token streams.
- Get stop-generation right early — abandoning a half-streamed response cleanly is harder than it looks and users expect it.
- Use a fast syntax highlighter for
[highlight_lib]so large code blocks do not jank the stream as tokens arrive. - Keep
[history_storage]client-side first if privacy matters; sync to an API only when cross-device history is needed. - Handle every error state — rate limit, network drop, model error — with a clear retry, since failures during streaming are common.
- Wire keyboard shortcuts (Enter to send, Shift+Enter for newline) early; they are core to a chat UI feeling fast.
- Add a per-block copy-code button; for a developer-facing chat it is one of the most-used affordances in the whole UI.
- Expose the model and parameter selector (temperature, max tokens) so power users can tune behaviour without code changes.
