Day 29 – How ChatGPT Streams Responses: A Developer’s Guide to the Typing Effect

August 23, 2025

Summary

In this guide, we break down how ChatGPT streams responses token by token to create the typing effect you see in real time. From HTTP protocols to frontend rendering, we’ll walk through the full lifecycle so you can build smarter, smoother AI interfaces.

Visual Flow (Textual Representation)

User → Browser → OpenAI API → GPT Model → Streaming Chunks → UI Updates

This flow underpins the real-time experience users encounter when interacting with ChatGPT. Each component plays a role in delivering incremental feedback that feels conversational and responsive.

What Happens When You Hit Enter

When you type a question into ChatGPT and press Enter, your browser sends an HTTP POST request to OpenAI’s chat completion endpoint:

https://api.openai.com/v1/chat/completions

Key parameters include:

model: "gpt-5"
stream: true

The stream: true flag is essential. It tells the API:

“Don’t wait for the full response. Send it to me in chunks as the model generates it.”

This enables the live, incremental rendering you see in the UI.

Streaming Protocols: Why It Works This Way

OpenAI uses HTTP chunked transfer encoding for streaming. Unlike traditional API responses that wait for the full payload, chunked encoding sends tokens as soon as they’re generated—keeping the connection open until completion.

You may also encounter Server-Sent Events (SSE) or WebSockets in similar streaming setups. These protocols are chosen to reduce latency, improve interactivity, and support real-time rendering.

Streaming is not just a performance optimization—it’s a design choice that enhances user experience.

How the Browser Handles Streaming

Here’s a simplified example using fetch() and ReadableStream:

    const response = await fetch("https://api.openai.com/v1/chat/completions", {

        method: "POST",

        headers: {

          "Content-Type": "application/json",

          "Authorization": `Bearer ${API_KEY}`

        },

        body: JSON.stringify({

          model: "gpt-5",

          messages: [{ role: "user", content: "Explain AI streaming" }],

          stream: true

        })

    });

    const reader = response.body.getReader();

    const decoder = new TextDecoder("utf-8");

    let partialText = "";

    while (true) {

        const { done, value } = await reader.read();

        if (done) break;

        const chunk = decoder.decode(value);

        const lines = chunk.split("\n");

        for (const line of lines) {

            if (line.startsWith("data: ") && line !== "data: [DONE]") {

                const json = JSON.parse(line.replace("data: ", ""));

                const content = json.choices[0]?.delta?.content || "";

                partialText += content;

                document.querySelector("#output").innerText = partialText;

            }

        }

    }

This code:

Reads small packets from the stream
Decodes them into JSON
Extracts delta.content
Appends to partialText
Updates the UI progressively

Want to make this interactive? Consider embedding a live CodePen or JSFiddle so readers can test streaming in-browser.

Why the Typing Effect Feels Real

The illusion of “typing” isn’t due to model latency—it’s a deliberate UI choice.

Each token triggers a DOM update via React or Vue, creating a rhythm that mimics human typing. Since tokens arrive every few milliseconds, the experience feels dynamic and conversational.

If OpenAI sent the full response in one go, you’d see a block of text appear instantly. Streaming makes the interface feel alive.

Edge Cases & Best Practices

For engineers deploying LLMs in production, consider:

Stream interruptions: Handle dropped connections gracefully
Timeouts & retries: Use exponential backoff or fallback messaging
Rate limits: Respect OpenAI’s usage quotas and monitor token consumption
Token limits: Be aware of max context window and output size

These considerations ensure robustness and reliability in real-world applications.

Summary Table

Step	Who Handles It	What Happens
1. Request	Browser → API	Sends question, sets `stream: true`
2. Stream	OpenAI Server	Generates tokens, sends chunks progressively
3. Read Chunks	Browser JavaScript	Uses `ReadableStream` to decode JSON packets
4. Update UI	Frontend Framework	Renders tokens immediately → typing effect

Internal & External Links

Related Decode AI Daily posts:

Day 17 – Prompt Engineering Patterns
Day 27 – Cognition & Token Planning

External references:

These links help deepen understanding and improve SEO authority.

Shareable Snippets

“ChatGPT’s typing effect is powered by HTTP streaming—not model delay.”
“Each token is streamed as a JSON chunk and rendered instantly in the UI.”
“Streaming responses make AI feel human—but it’s all frontend magic.”

Use these for LinkedIn or Twitter to spark conversation and share insights.

Final Thoughts

Streaming isn’t just a technical detail—it’s a design choice that shapes how users experience AI. If you’re building chat interfaces, agentic workflows, or educational tools, understanding this flow helps you deliver clarity, speed, and delight.

We’d love to hear how you’re using streaming in your own projects. Drop your thoughts, questions, or feedback below—and don’t forget to follow along so you don’t miss Day 30.

Let’s keep building.

Decode AI Daily