Stream OpenAI Chat Completions Like ChatGPT in JavaScript

📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support Paypal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - [e-mail]
OpenAI
OpenAI Chat Completions API
OpenAI in JavaScript
Stream OpenAI Chat Completions in JavaScript
Stream Chat Completions like ChatGPT

[@Codevolution]

Part 1 - ruclips.net/video/gr7FiRqswF0/видео.html
Source code for copy pasting - bit.ly/3Lm8iyQ

[@ankitkumarjha8109]

Can you make a video for Backend implementation of the same? I am able to get the data in chunks, how to read and stream the same in Front end?

[@TheAIEpiphany]

Thanks for the video! How does one send stream from the backend instead? Not sure why everyone is creating a version where you have to share the key from the front-end 😅

[@gurunnevada17]

I have this version, working well on localhost, not on versel haha.

[@corsaronero5619]

you are a star, i was looking how to simulate the streaming result using openai api, thank you so much, hope you keep it up on AI videos

[@MohammedElshorbagy]

Thanks for the great coding.
Is there away to hide or secure the API key in your code from being public exposed?
I've already tried . env but I didn't succeed to make it work.
Thanks in advance.

[@gurunnevada17]

up. Same question.

[@MichaelLearnsToCode]

AFAIK, you can't do that on client side. make a new API Gateway and setup your API key there. and call the API you just created without requiring any API key on the client side.

[@hishamabbasi815]

When returning the response which involves the code block the chat gpt uses two occurrences of three back ticks ``` is there a way using vanilla javascript to replace those three back ticks with opening and closing html code tags

[@sagarramaswamy8368]

can u please do a tutorial on how to integrate openAi whisper model .

[@sreedhar1006]

Please can you have the same for react-native ?

[@Matt-Banham]

for people asking how to create a stream from a back end to front end you can load tokens into a queue and initiate the queue on a separate thread then read the queue from that thread asynchronously on your front end

[@employedgorilla]

Struggling with the backend and frontend communication, do you have an example you could share

[@carlosm9111]

How would this work exactly? Javascript is fundamentally single threaded and outside of using a websocket, there is no way to send communication back to the browser from the back end ...

[@mokeddesasma1240]

did u found an example please? Thank u@@employedgorilla

[@mvskiran4727]

Appreciate for sharing the video. But, I have a questions. Wouldn’t it be bad to update UI from every chunk of data from backend. Are there any parser to handle chunks to update UI?

[@jaysharmaumbc]

Thanks for the video. Seems like parsing logic need to change for gpt4 response. Is there any generic way for parsing response?

[@LuberthDijkman]

Now md to html javacript parser for chat that triple backtick code fields wil be in code

[@Spk7711]

If I am using Angular for a chat GPT API call, where can I store my API key in Angular? Even if we store it in the environment variable while making the request, it would be visible in the network tab, right? So how can we get security?

[@imnbsp]

but how to stream structured data though? if my data is in a multi-level deep json format how to I make sure I get a similar response?

[@aakash6238]

Sir, my free credit got expired 😭, now how to practice these prompts in a free way ?

[@abhishekvishwakarma9045]

Great video, thanks for sharing

[@zacboyles1396]

Great video thanks

[@_V__.]

Awesome 🎉

[@Ga2-20]

Is it possible to read stream using axios?

[@ХасановЛенар-в3р]

Yes - stream.on('data', (data) => {//...)

[@Miguel-Barcelo]

Thanks for sharing

[@harischaudhry8366]

I am getting an error .
"Cannot read property 'getReader' of undefined"

[@sanjay261982]

I am also getting this error. Were you able to resolve it? If yes, how?

[@nicholasjankovic1040]

Same here. I've been stuck on this error for days. If either of you were able to fix it, please let me know.

[@muhammedsinanck7234]

Try to use normal fetch without importing any library in code
, when i used isomorphic-fetch i got this error

[@niil_kh]

i'm also stuck on same issue since 2 months, did you get ans. plz let me know

[@aakash6238]

Mazza aa gya 🌹🔥🔥☺️

[@AayushSkp]

❤❤❤

[@SebastianLouisSG]

very useful thousand likes

[@田中洋-f6i]

nice vid!!

[@sandeeplakhiwal7043]

💙