Deep dive into the code behind Napkins - Wireframe to Code app

[@HassanElMghari]

Thanks for making this video, Elie!

[@elie2222]

Thanks for putting the demo together 💪

[@trends_vc]

Great vid. Thanks for sharing Elie

[@elie2222]

Thanks!

[@priyankrajai]

Great video Elie ❤

[@elie2222]

thanks!

[@starlord7526]

do you mind creating a tutorial on streams on the frontend? I cant seem to find good enough content on it. For the backend, using node, there are enough but not on the front part

[@elie2222]

Yup. I missed that in the video. Think I may have covered the concept in some older videos.
But basically, the response is streamed in here:
github.com/Nutlope/napkins/blob/main/app/page.tsx#L87-L89
And we call setState on each chunk.
And the main work is in readStream which is an async generator function:
github.com/Nutlope/napkins/blob/main/lib/utils.ts
You can also use libraries like vercel/ai that give you hooks to handle this.

[@mihaelisaev]

"streams on the frontend" - what's that?

[@starlord7526]

@@mihaelisaev readable, writable, transofrm stream stuff. I have gone through almost every nutlope's codebases and everywhere he uses streams to render the llm response on frontend

[@starlord7526]

I was just going through the project

[@elie2222]

hope this helped you! any other projects you're interested in right now?