Streaming OpenAI Chat Completions Using React and Node JS

In this tutorial we go over the code for an endpoint that allows us to stream back a response from the OpenAI chat completion API. We use a Node JS server and a React JS frontend.

Links

#chatgpt #openai #reactjs

[veerbal]

thanks, bro, I thought this was something complex and only Vercel could do this. Now I have also created my own streaming solution

How do you handle special tokens returned by openai for formatting in your react component?

[thedakota]

Hey Tosh, for some reason this code doesn't work for Azure open AI api. Can you tell me why?

[SimranpreetSingh-oo]

hey great video, can we do this directly on frontend without using NODE js?

[golightlyplus]

Where do you host the server code? I normally use Firebase functions, but it doesn't support streaming.

[swagz]

I got ERROR: TypeError: Cannot read properties of undefined (reading 'on') when i return the response i dont get a .data object i jsut get this:

Stream {
iterator: [AsyncGeneratorFunction: iterator],
controller: AbortController { signal: AbortSignal { aborted: false } }
}

[bantoonoises]

How do I use react to make a chat like feature and stream in unique responses from the server, not public to anybody that fetches from the endpoint

[SeanAhrens]

thanks! will this solution work with a backend in node/express, a frontend in react? (no next.js)

[alkaribeats]

Worked like magic. Thanks bro. Props to not over explaining and wasting time!

[alishoaib]

subscribed. Thank you. Which package did u install to import, configuration and openai API from "openAI" ? i tried the same but unable to import