ChatGPT: The streaming-first chat interface

OpenAI's ChatGPT defined the AI chat surface — streaming reveals, a composer that never leaves view, and citations that appear only once grounded.

An independent reading of ChatGPT's interface, grounded in OpenAI's public documentation. Quotes are verbatim from the linked official pages. The product UI may differ from what is described.

Streaming reveal

The first token lands fast, then text streams into place with a blinking caret — momentum without a spinner.
Send becomes Stop the moment generation starts: one control, two states, no second location to learn.
While streaming, nothing else on the screen moves. The composer stays put and the message grows in place.

“we received the first token after 0.1 seconds, and subsequent tokens every ~0.01-0.02 seconds.”
Source: OpenAI Cookbook — How to stream completions ↗

Pattern in action — ChatGPT

AssistantGenerating

Composer-first layout

The composer is always visible — never below the fold, never requiring a scroll to reach.
Enter sends, Shift+Enter is a newline, slash opens commands. The keyboard is the primary path.
Web search, voice and attachments live beside the input, not behind a menu.

“You can also click the web-search icon or use the “/Search” shortcut in supported experiences.”
Source: OpenAI Help Center — What is ChatGPT? ↗

Pattern in action — ChatGPT

Grounded citations

Superscript numbers appear only after the answer is grounded — never while streaming.
A small number sits at the end of a sentence; selecting it opens the source, hovering over it (desktop) previews it.
A Sources list at the end of the response exposes everything the model consulted — which is often more than the inline citations show.

“ChatGPT responses that use search can include inline citations. Users can select a citation to view the source.”
Source: OpenAI Help Center — ChatGPT search for Enterprise and Edu ↗

Pattern in action — ChatGPT

The most capable models ship in two variants — one with additional safety measures, and one restricted to approved organizations. When rendering tokens incrementally, treat the stream as a first-class UX concern rather than a progress hack .

For actions with real-world consequences, a human-in-the-loop gate is not optional — it is the difference between a helpful assistant and an uncontrolled agent .

Model choice at the point of use

Switching models is one click from the composer, and your draft survives the switch.
Each model surfaces its reasoning capability inline, so the choice reads as “which brain”, not “which settings screen”.

Pattern in action — ChatGPT

Best mix of speed and quality for daily work.

Graceful interruption

Stopping is one click and immediate; the partial answer stays visible and editable.
Regenerate keeps context — the thread survives, only the turn re-rolls.

Design takeaways

Put the composer where it can never scroll away — input always beats a scrolling window.
Stream text in place with a caret; a visible stop control is the best progress indicator.
Show citations only after grounding, attach them to sentences, and keep the hover card instant.
Let users switch models and regenerate without losing their draft or the thread.

Sources

Build it with our components

Prompt Input

The core input for AI chat products — with attachments, model selector, tools, voice and loading states.

Streaming Message

Assistant message that renders token-by-token with a cursor and stop control.

Citation UI

Inline citation markers with hover preview cards.

Prompt Input + Model Selector

Prompt input with an inline model picker and capability badges.