Consume Web streams from OpenAI using vanilla JavaScript - NO DEPENDENCIES!

Find the code here: umaar.com/dev-tips/269-web-st... and while you're there, signup for the Dev Tips mailing list to get more videos and tips like this one!
Chapters:
00:00:00 - What we're going to achieve
00:01:30 - Making a Fetch Request
00:03:01 - Non-streamed data
00:03:50 - Streaming the data
0:05:20 - Decoding Streamed Data
0:09:43 - Running the Script with Node JS
0:10:58 - Adding an Abort Controller
0:12:17 - Recap of Fetch API Streaming
0:12:47 - Conclusion and recap

[@theeFaris]

fantastic, a super simple minimalistic and working code

[@UmarHansa]

00:01:30 - Making a Fetch Request 00:03:01 - Non-streamed data 00:03:50 - Streaming the data 0:05:20 - Decoding Streamed Data 0:09:43 - Running the Script with Node JS 0:10:58 - Adding an Abort Controller 0:12:17 - Recap of Fetch API Streaming 0:12:47 - Conclusion and recap

[@rhysm8167]

Brilliant. Awsome mate. Thank you.

[@johnm8358]

Nice, love your videos

[@michaeldausmann6066]

nice content, well explained. for await is cool. also the destructuring of the json was interesting, I haven't used that before, nice exposition.

[@islamabo0]

Your videos are the best. I don't miss videos nor shorts ❤

[@wboumans]

Thx, just what i needed!

[@wobsoriano]

Awesome vid. Only thing that'll stop me from doing open ai requests in the browser is exposing the API keys. That's why I always end up using a server so I can authenticate a user and not expose API keys + Server Sent events

[@elliotjunemusic]

SOOOO badaasss, omg - Is see practical ways I could use that - didn't even know streaming was that ... simple in a sens (obvisouly considering the API you're consuming)

[@theclarkofben84]

Nice work, man

[@sashirestela8572]

For demo it is fine to call the OpenAI endpoint from the web side, but it is bad for other purposes because your API Key remains exposed to being stolen easily. It is more recommended to made the call on the server side, IMHO.

[@ahmad-murery]

Very interesting example, I like doing my things using vanilla JS as much as I can. It will be very useful if you can explain more browser's web APIs. Thanks Umar👍🚀

[@UmarHansa]

Browsers are a lot more capable now! I'll try and cover more vanilla JS techniques soon, thank you Ahmad!

[@ahmad-murery]

@@UmarHansa I'll be waiting patiently

[@user-yf8hr1fe5u]

Great tutorial! One wired bug that I've encountered if anyone is interested (not in the video) The 1st text content is missing. It turned out that, the 1st chunk in my response body contains 2 data pieces (just like the last one), and the 1st piece which looks like this "choices":[{"delta":{"role":"assistant"},"index":0,"finish_reason":null}] has no "content" property in "delta" and should be excluded like the "data: [DONE]".

[@UmarHansa]

Thanks for sharing!

[@sergiomartin8935]

Great!

[@_nikeee]

If the API would work with GET instead of POST, you could just use EventSource, since streaming just seems to be SSE in this case

[@beernutz]

Very cool video! Thank you! What is your coding setup? It looks like a bit more than autocomplete going on there.

[@UmarHansa]

Thanks! VS Code with Zen mode on, dracula theme, and GitHub CoPilot. Browser is Firefox DevTools

[@jimshtepa5423]

what is the plugin that shows you content of console.log?

[@vlkf]

3:04 - what plugin shows this 2letter hotkeys to be able to navigate to any place in code? I wonder can i found same for jetBrains ide

[@UmarHansa]

AceJump