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 - kzbin.info/www/bejne/naOad5yIptiqfJI Source code for copy pasting - bit.ly/3Lm8iyQ

[@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

[@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

[@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.

[@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

[@jaysharmaumbc]

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

[@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?

[@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.

[@sagarramaswamy8368]

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

[@aakash6238]

Mazza aa gya 🌹🔥🔥☺️

[@abhishekvishwakarma9045]

Great video, thanks for sharing

[@zacboyles1396]

Great video thanks

[@SebastianLouisSG]

very useful thousand likes

[@Miguel-Barcelo]

Thanks for sharing

[@_V__.]

Awesome 🎉

[@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?

[@田中洋-f6i]

nice vid!!

[@LuberthDijkman]

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

[@AayushSkp]

❤❤❤

[@sandeeplakhiwal7043]

💙

[@Ga2-20]

Is it possible to read stream using axios?

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

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

[@aakash6238]

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

[@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?

[@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