Integrating OpenAI GPT into my React app – how to handle streaming responses?

[pillovv840-pixel]

Body

Hi everyone,

I’m trying to integrate OpenAI GPT into my React app so users can get AI-generated answers in real-time. I want to display the response as it streams, like how ChatGPT shows text being typed.

Right now, I’m using a simple fetch call to the OpenAI API, but it only gives me the full response at the end, not as it streams.

Has anyone implemented streaming GPT responses in a React app? What’s the best approach to handle this?

Thanks in advance!

Guidelines

• I have read and understood this category's guidelines before making this post.

[kyyasilmyradovv]

Hey Friend 👋

You can get streaming responses from OpenAI by using the response.body readable stream in JavaScript. Here’s a simple example in a React component:

const handleStreamResponse = async () => {
  const res = await fetch("/api/openai-stream", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt: "Hello GPT!" }),
  });

  const reader = res.body.getReader();
  const decoder = new TextDecoder("utf-8");
  let done = false;

  while (!done) {
    const { value, done: doneReading } = await reader.read();
    done = doneReading;
    const chunk = decoder.decode(value);
    setOutput(prev => prev + chunk); // append chunk to state
  }
};